Question

我正在尝试编写一个动画指令，它可以改变元素的宽度并在模型之后进行更改。这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-app="myApp" ng-controller="MyCtrl">
            <button ng-init="speed=20000" ng-click="model.width = model.width + 100;"> + </button>
            <button ng-click="model.width = model.width - 100;"> - </button>
            <div animate-to-width="model.width" speed="{{speed}}" done="model.done()" style="background-color: #f00; width: 100px;">w:{{model.width}}|a:{{model.a}}|b:{{model.b}}</div>
        </div>

        <script src="components/jquery/jquery.js"></script>
        <script src="components/angular-unstable/angular.js"></script>
        <script>

var myApp = angular.module('myApp',[]);

myApp.directive('animateToWidth', function() {
    return {
        'restrict': 'A',
        'link' : {
            'post': function(scope, element, attrs) {
                scope.$watch(
                    attrs.animateToWidth,
                    function (newValue) {
                        element.animate(
                            {'width': newValue + 'px'},
                            attrs.speed,
                            function () {
                                scope.model.a++;
                                //scope[attrs.done]();
                            }
                        );
                    }
                );
            }
        }
    };
});

function MyCtrl($scope) {
    $scope.model = {};
    $scope.model.width = 100;
    $scope.model.a = 0;
    $scope.model.b = 0;
    $scope.model.done = function () { $scope.model.b++; };
}

        </script>
    </body>
</html>

当我运行此代码时，jQuery .animate（）函数的第二个参数似乎不会影响动画速度，并且在动画完成后将立即调用回调（第三个参数）。

我的第二个问题是，我想将控制器的回调传递给指令，我不知道如何实现这一点。

修改

以下是解决方案（感谢@banana-in-black）：

http://plnkr.co/edit/D9TJHBYjtnxTve0xZpBS?p=preview

这里没有控制器中的宽度值：

http://plnkr.co/edit/eiy99Crh57Jc78RhAsRt?p=preview

Answer 1

你从attrs.speed获得的是String，如果你将持续时间设置为String到jQuery.animate()，则无效。因此，使数字可以解决速度问题。

jQuery.animate()之后的回调在“角度世界”之外被调用，因此您必须使用$apply来确保角度知道模型发生了什么。

如果未将范围指定给指令，则它将使用元素上的现有范围。在这种情况下，div [animate-to-width]使用与MyCtrl相同的范围。您只需调用在控制器中设置范围的功能即可。

scope.$watch(
    attrs.animateToWidth,
    function (newValue) {
        element.animate(
            {'width': newValue + 'px'},
            attrs.speed * 1,
            function () {
                scope.$apply(function() {
                    scope.model.a++;
                    scope.model.done();
                });
            }
        );
    }
);

Example in Plunker

角度动画指令应在动画完成后调用控制器函数

1 个答案: