AngularJS消化功能

Question

據說裏面我有以下的HTML

<div ng-if="running"> 
    <div id="someid"></div> 
</div> 
<span ng-click="myfunc">Click</span> 

在角控制器我設置的函數，點擊一個按鈕

$scope.myfunc = function(){ 
    $scope.running = true; 

    //attach some jquery event 
    $('#someid').on('animationend', function(){...}) 
} 

我想更新的DOM之後running=true時，因爲如果我沒有或者把附加的事件放在其他地方，它不工作，因爲DOM不存在。 ng-if似乎將其刪除，它只在功能結束時才顯示div。我嘗試$scope.$digest()運行後不工作，它顯示錯誤。

那麼附加上述事件的正確方法是什麼？

Answer 1

嘗試在你的控制器使用$超時，以這樣的方式

myApp.controller('exampleController', ['$scope', '$timeout', function($scope, $timeout) { 

       $scope.myfunc = function(){ 
        $scope.running = true;    

        var timeout = $timeout(function({ 
        $('#someid').on('animationend', function(){...}) 

        $timeout.cancel(timeout); 
        }, 0) 
       } 
      }]); 

簡而言之，以0爲間隔的$timeout可讓您等待下一個摘要循環。

Answer 2

<div ng-if="running"> 
    <div id="someid"></div> 
</div> 
<span ng-click="myfunc()">Click</span> 

//in controller 
    $('#someid').on('animationend', function(){ 
    $scope.$apply(function() { 
     //$scope.blabla = 'hello'; 
    }) 
    }); 

$scope.myfunc = function(){ 
    $scope.running = true; 
} 

但是，你應該做一個指令

編輯：

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

 
app.directive('startAnimate', function() { 
 
\t return { 
 
\t \t scope: { 
 
\t \t \t startAnimate: '@', //animation name (string) 
 
\t \t \t seconds: '@', //duration in seconds (int) 
 
\t \t \t startOnCreation: '=?', //start on creation of element (boolean) - optional 
 
\t \t \t onAnimationEnd: '=?', //callback at end - optional 
 
\t \t \t workspace: '=?' //create an object to allow two-way data binding with primitive values (boolean, int, ...) - optional 
 
\t \t }, 
 
\t \t link: function (scope, element, attributes) { 
 
\t \t \t var animation = scope.startAnimate + ' ' + scope.seconds + 's'; 
 

 
\t \t \t if (!scope.workspace) { 
 
\t \t \t \t scope.workspace = {}; 
 
\t \t \t } 
 

 
\t \t \t scope.workspace.running = false; 
 

 
\t \t \t var setElementSAnimation = function (animation) { 
 
\t \t \t \t element.css({ 
 
\t \t \t \t \t WebkitAnimation: animation, 
 
\t \t \t \t \t animation: animation 
 
\t \t \t \t }); 
 
\t \t \t } 
 

 
\t \t \t var startAnimation = function() { 
 
\t \t \t \t setElementSAnimation(animation); 
 

 
\t \t \t \t scope.workspace.running = true; 
 
\t \t \t } 
 

 
\t \t \t if (scope.startOnCreation) { 
 
\t \t \t \t startAnimation(); 
 
\t \t \t } 
 

 
\t \t \t element.click(function() { 
 
\t \t \t \t scope.$apply(function() { 
 
\t \t \t \t \t startAnimation(); 
 
\t \t \t \t }); 
 
\t \t \t }); 
 

 
\t \t \t if (!scope.onAnimationEnd) { 
 
\t \t \t \t scope.onAnimationEnd = function() { }; 
 
\t \t \t } 
 

 
\t \t \t var oldAnimationEnd = scope.onAnimationEnd; 
 

 
\t \t \t scope.onAnimationEnd = function() { 
 
\t \t \t \t oldAnimationEnd(); 
 

 
\t \t \t \t //clean animation to allow to repeat it 
 
\t \t \t \t setElementSAnimation(''); 
 

 
\t \t \t \t scope.$apply(function() { 
 
\t \t \t \t \t scope.workspace.running = false; 
 
\t \t \t \t }) 
 
\t \t \t }; 
 

 
\t \t \t element.on("webkitAnimationEnd animationend", scope.onAnimationEnd); 
 
\t \t } 
 
\t } 
 
}); 
 

 
app.controller('myCtrl', function ($scope) { 
 
\t $scope.myfunc = function() { 
 
\t \t alert('finish'); 
 
\t } 
 

 
\t $scope.showElement = false; 
 

 
\t $scope.workspace = { 
 
\t \t running: false 
 
\t } 
 
});

#myDIV { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background: orange; 
 
\t position: relative; 
 
} 
 

 
@-webkit-keyframes mymove { 
 
\t from { 
 
\t \t top: 0px; 
 
\t \t left: 0px; 
 
\t } 
 

 
\t to { 
 
\t \t top: 80px; 
 
\t \t left: 160px; 
 
\t } 
 
} 
 

 
@keyframes mymove { 
 
\t from { 
 
\t \t top: 0px; 
 
\t \t left: 0px; 
 
\t } 
 

 
\t to { 
 
\t \t top: 80px; 
 
\t \t left: 160px; 
 
\t } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div data-ng-app="myApp" data-ng-controller="myCtrl"> 
 
\t <div data-ng-if="workspace.running"> 
 
\t \t Yes, it's running! 
 
\t </div> 
 

 
\t <div id="myDIV" data-ng-if="showElement" data-start-animate="mymove" data-start-on-creation="true" data-seconds="4" data-on-animation-end="myfunc" data-workspace="workspace"> 
 
\t \t <span>Click me to start the animation.</span> 
 
\t </div> 
 

 
\t <button type="button" data-ng-click="showElement = !showElement">Toggle element</button> 
 
</div>