要素の幅を変更し、モデルのあとがきを変更するアニメーション ディレクティブを作成しようとしています。これが私のコードです:
<!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
ここでは、コントローラーにこれらの幅の値がありません。