函数内部的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(){...})
}

我想在running=true 之后立即更新 DOM，因为如果我不这样做或将附加的事件放在其他地方，它就不起作用，因为 DOM 还不存在。 ng-if 似乎将其删除，并且仅在函数结束时才显示 div。我在运行后立即尝试$scope.$digest() 也不起作用，它显示错误。

那么附加上述事件的正确方法是什么？

Answer 1

尝试在你的控制器中使用 $timeout，这样：

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

简而言之，$timeout 以 0 为间隔让您等待下一个摘要周期。

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

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

			scope.workspace.running = false;

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

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

				scope.workspace.running = true;
			}

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

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

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

			var oldAnimationEnd = scope.onAnimationEnd;

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

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

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

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

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

	$scope.showElement = false;

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

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

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

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

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

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

<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">
	<div data-ng-if="workspace.running">
		Yes, it's running!
	</div>

	<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">
		<span>Click me to start the animation.</span>
	</div>

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