AngularJS verdauen innerhalb einer Funktion

Question

Angeblich soll ich habe folgendes HTML

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

In Winkelregler ich eine Funktion eingestellt, wenn eine Schaltfläche klicken

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

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

ich das DOM direkt nach running=true aktualisieren wollen, denn wenn Ich mache das angehängte Event nicht irgendwo anders, es funktioniert nicht, weil das DOM noch nicht existierte. ng-if scheint es zu entfernen und es zeigt nur das div nur, wenn die Funktion endet. Ich habe versucht, $scope.$digest() direkt nach dem Ausführen nicht funktionieren, und es zeigt einen Fehler.

Also, was ist der richtige Weg, um das Ereignis oben anzuhängen?

Answer 1

Versuchen Sie es mit $ timeout in Ihrem Controller, auf diese Weise:

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) 
       } 
      }]); 

Kurz gesagt, $timeout mit 0 als Intervall können Sie auf den nächsten Digest-Zyklus warten.

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; 
} 

Aber Sie sollten eine Richtlinie

EDIT machen:

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>