Hello All,
I am having a bit of a problem. I have two separate portions of my web
app, which each have their own controllers and communicate together. On
the right side of my page there are multiple entries. Each entry has two
buttons, a plus 1 button and a minus 1 button. When someone clicks a
button, ng-click calls a function with the $index and either "plus" or
"minus" to know which button was clicked. This controller then removes the
item from the list and broadcasts that a button has been clicked.
($rootScope.$broadcast('buttonClicked');
This is when the second controller (for the section on the left side of the
page) responds to the button click.
$scope.$on('buttonClicked', function() { ...something happens ... });
The ...something happens... section of the code is adding the +1 or -1 to a
number and calculating an average.
It is at this point in my code that I'm encountering problems. I want to
add two animations (using animate.css<http://daneden.github.io/animate.css/>).
Any time that the user clicks either +1 or -1 buttons, I would like to use
a directive to monitor the change of the average. I would like one
animation to occur before the number is updated (fade out) and another to
occur moments afterward (fade in).
I have tried using:
$scope.$watch(attrs.something, function (nv, ov) {
if (nv!=ov){
console.log("something changed");
}
);
attrs.on('change'), function(){
console.log("something changed")
});
element.on('change'), function(){
console.log("something changed")
});
Right now I can't even get console.log to send "Hello World" within my
directive (on the change of an attribute).
I'm just frustrated and would appreciate any guidance that this group can
offer. I have reviewed the documentation on the angularjs.org site, but am
confused. I would ultimately like to just watch for a change to
{{average}}, for the directive to add or remove a class which gives the
specific animation at the correct time (using $timeout).
I'm currently using twitter bootstrap.
My HTML:
<div class="container-fluid" ng-controller="leftCtrl">
<div class="row">
<div class="col-md-4">
<div class="well">
<div ng-repeat="average in averages">
<center><div
averageAnimation="waitingOnClick" class="average animated "
ng-class="averageAnimation">{{average}}</div></center>
<!-- {flipOutX: percentHide, fadeInLeft:
percentShow} -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8" ng-controller="rightCtrl">
<accordion close-others="false">
<accordion-group ng-repeat="rate in ratings"
is-open="true" class="panel panel-info btn-default ">
<accordion-heading>{{rate.shortName}}
<button type="button" class="close"
aria-hidden="true" ng-click="remove($index)"><i class="fa fa-times-circle-o
fa-x"></i>
</button>
</accordion-heading>
{{rate.desc}}
<br>
<div class="pull-right">
<button type="button" class="btn btn-success"
ng-click="click($index, 'plus')">+1</button>
<button type="button" class="btn btn-danger"
ng-click="click($index, 'minus')">-1</button>
</div>
</accordion-group>
</accordion>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
