Problems Monitoring Changes on {{values}} to Trigger Directive manipulations of DOM

[Shawn Shaw]

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).  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>

[Garry Taylor]

Can you post something up on jsfiddle or equivalent. The watch should work but its difficult to see without the full code

[Shawn Shaw]

http://jsfiddle.net/Shawful/HB7LU/3670/

This jsfiddle shows as far as I can take my code right now without getting confused.  I would like to add a class (fadeOut) before the {{student.grade}} changes, then let the {{student.grade}} change, and lastly remove the fadeOut class and add the fadeIn class.  That way there is a nice little animation after each change to the class's grades from a curve (button click).  If possible, I would like to add a cascading effect so that the animations occur first to John's grade, and then to Sally's, and so on, down the list of students in the array.

Now I know that directives should be used to manipulate the DOM.  Since I would like to add classes to the div with ID="grades" to add animate.css animations, should I still be using a directive?  Can't I just add and remove classes in the controller? I'm 98% sure I should be doing this in a directive, but I haven't found a good example online. What's the best angular approach? And could someone please post a directive that could resolve this issue?

On Fri, May 16, 2014 at 12:13 PM, Shawn Shaw <shawn....@gmail.com> wrote:

Yes, I will do that as soon as I can, probably tonight.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Diegpv3I8ew/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Garry Taylor]

Hi Shawn, I will have a look at this in the morning. I think you will need to create a directive that allows them to be chained somehow. This will allow the collection to animate one after the other using promises (just an idea at the moment).

I have implemented a very basic update that will allow the CSS to be altered by using events.. you can then set the correct CSS from the animate.css file.. Note: As this will be very quick I think that a simple event to toggle would be enough to give the affect you are looking for. 

the following is just me messing around but it might give to another approach to this. I will have a look at a directive tomorrow.

http://jsfiddle.net/Yxjr3/1/

Regards,

Garry Taylor

[Garry Taylor]

Another example with some wobbling going on :)

http://jsfiddle.net/Yxjr3/3/ 

[Shawn Shaw]

Yup, definitely going to need a directive .  I have toyed around a bit, but found that currently we can only see animations when we switch from the +1 to the -1 and back and forth.  If you click +1 twice, you will not see the animation on the second click.  I tried to add a directive that would remove the "animated bounce" class after a 1 second timeout, but that did not work. hmm..

http://jsfiddle.net/Shawful/Yxjr3/4/

On Sat, May 17, 2014 at 7:51 PM, Garry Taylor <gplt...@gmail.com> wrote:

Another example with some wobbling going on :)

http://jsfiddle.net/Yxjr3/3/ 

--

[Shawn Shaw]

Issue resolved on stackoverflow.com

StackOverflow Answer

http://stackoverflow.com/questions/23769094/problems-monitoring-changes-on-values-to-trigger-directive-manipulations-of/23769842?noredirect=1#23769842

Working JSFiddle

http://jsfiddle.net/Yxjr3/5/