AngularJS - 動畫完成後的調用控制器方法

我有一個按鈕和一個隱藏的div。當我點擊按鈕時，div的寬度將會擴大。這是我的HTML至今：AngularJS - 動畫完成後的調用控制器方法

<div ng-controller="PageController"> 
    <button ng-click="togglePage()>Show Details</div> 
    <div class="page-slide-animation" ng-show="page"> 
    </div> 
</div>

我控制器提供了以下方法：

$scope.togglePage= function() { 
    $scope.page = !$scope.page; 
};

這是我的動畫：

app.animation('.page-slide-animation', [function() { 
    return { 
     beforeAddClass : function(element, className, done) { 
      if(className == 'ng-hide') { 
       jQuery(element).animate({width: 'toggle'}, function() { 
        done(); 
       }); 
      } 
     }, 
     removeClass : function(element, className, done) { 
      if(className == 'ng-hide') { 
       jQuery(element).animate({width: 'toggle'}, function() { 
        done(); 
       }); 
      } 
     } 
    }; 
}]);

能正常工作至今。我需要做的是在動畫完成後調用PageController中的控制器方法。什麼是最好的方式來做到這一點（使用控制器中的超時向服務注入動畫，..）？

來源

2014-11-04 WeSt

一個可能的解決方案是使用$ rootScope發出一個事件。$發出並捕獲到控制器中。

來源

2014-11-04 13:25:55 Michael

您能爲此提供任何代碼嗎？ – WeSt 2014-11-04 13:27:16

類似這樣的： http://jsfiddle.net/n9evtryd/1/ 點擊按鈕激活一個2秒後調用的函數。這個函數調用一個服務，它發出一個由另一個控制器捕獲的事件 – Michael 2014-11-04 13:51:49

這是否也與動畫一起工作？或者我必須將服務傳遞給動畫並在那裏使用它？ – WeSt 2014-11-05 07:39:08

嘗試使用$ scope。$在控制器中使用$ scope發出並捕獲它$ $

來源

2014-11-04 18:12:13

AngularJS - 動畫完成後的調用控制器方法

回答

相關問題