角動畫指令應該在動畫完成後調用控制器函數

我試圖編寫一個動畫指令，它改變了元素的寬度並在模型後綴中進行了更改。這裏是我的代碼：角動畫指令應該在動畫完成後調用控制器函數

<!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

來源

2013-10-05 stofl

什麼你從attrs得到速度爲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

來源

2013-10-05 20:26:08

謝謝！使速度成爲一個整數解決了兩個問題：'速度'被忽略，回調被立即調用（不是在動畫完成後）。我知道'$ apply'，謝謝。我的問題在於，回調已經立即**執行**並且'a'已經增加，儘管它沒有被設置爲'$ apply'。我不想在指令中硬編碼控制器函數調用，因爲我不想讓指令知道有關控制器的任何信息。但我解決了回調問題：http://plnkr.co/edit/D9TJHBYjtnxTve0xZpBS?p=preview – stofl

角動畫指令應該在動畫完成後調用控制器函數

回答

相關問題