0

要素の幅を変更し、モデルのあとがきを変更するアニメーション ディレクティブを作成しようとしています。これが私のコードです：

<!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() 関数の 2 番目のパラメーターはアニメーションの速度に影響を与えないようで、アニメーションが終了した直後にコールバック (3 番目のパラメーター) が呼び出されます。

私の2番目の問題は、コントローラーからディレクティブにコールバックを渡したいのですが、これを達成する方法がわかりません。

編集

これが解決策です（ @banana-in-black に感謝します）：

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

ここでは、コントローラーにこれらの幅の値がありません。

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

4

1 に答える 1

1

attrs.speed から得られるStringのは であり、期間をStringに設定しても効果はありませんjQuery.animate()。したがって、数値にすると速度の問題が解決する可能性があります。

後のコールバックjQuery.animate()は「Angular の世界」の外で呼び出されるため、$applyを使用して、Angular がモデルに何が起こったかを認識していることを確認する必要があります。

ディレクティブにスコープを割り当てなかった場合、要素の既存のスコープが使用されます。この場合、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();
                });
            }
        );
    }
);

プランカーでの例

于 2013-10-05T20:26:08.937 に答える