angularjs - 如何在 AngularJS 中重新应用包含插值的指令

Question

假设您有一个简单的滑入动画指令：

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

和html：

<div slide-in>foo</div>

效果很好。

现在假设 html 使用 Angular 插值：

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

这适用于第一次更改 scope.foo 的值，但不适用于后续尝试。

问题是：如何在每次更改时重新应用指令？

似乎把它放在手表的链接功能中是要走的路......

Answer 1

当您的应用启动时，Angular 会抛出所有 Dom 并编译所有指令。您会看到一次动画，因为 Angular 编译一次。你看起来是对的，你应该用 $watch 来做。

这是一个解决方案：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);
            })
        }
    };
});

如果你想用这种方法做动画，你应该了解 Angular 动画。如果您使用 Angular 1.2，这里有一篇关于它的好文章http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html