How to re-apply a directive containing interpolation in AngularJS

Question

Let's say you have a simple animation directive for slide-in:

directives.directive('slideIn', function () {
    return {
        compile:function (elm) {
            $(elm).css('padding-left', '200em');
            return function (scope, elm, attrs) {
                $(elm).animate({ 'padding-left':'0em'}, 500);
            };
        }
    };
});

And html:

<div slide-in>foo</div>

Works great.

Now let's say the html uses Angular interpolation:

<div slide-in>{{foo}}</div>

This works on the first change to the value of scope.foo, but not on subsequent attempts.

Question is: How to reapply the directive on each change?

Seems like putting this in a link function with a watch is the way to go...

Answer 1

When your app start, Angular go throw all Dom and compile all directive. You see animation once because angular compile once. You seems right, you should do it with $watch.

Here is a solution: http://jsfiddle.net/pbucv/12/

.directive('slideIn', function () {
    return {
        link: function (scope, elm, attrs) {
            scope.$watch("foo", function() {
                $(elm).css('padding-left', '200em');
                $(elm).animate({ 'padding-left':'0em'}, 500);
            })
        }
    };
});

If you want use this approach for do animation, you should learn about Angular animation. If you use Angular 1.2 here is good article about it http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html