AngularJS 的可重复动画
Repeatable animation with AngularJS
我正在使用自定义指令在页面上的指定字段为空白时触发元素上的动画。截至目前,当用户使用我的自定义指令单击按钮时,动画将起作用一次。再次单击按钮不会触发动画,我不确定为什么。我尝试将 .then() 与 $animate 服务一起使用,但没有成功。
提前感谢您any/all的帮助。
(function () {
'use strict'
ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler])
function cfWobbler($animate, $parse) {
var ret = {
restrict: 'A',
link: link
}
return ret;
function link(scope, elem, attrs) {
var el = document.getElementById('division-holder');
var fn = $parse(attrs['cfWobbler']);
elem.on('click', function () {
scope.$apply(function () {
if (fn(scope) === '') {
$animate.removeClass(el, 'bounceInDown');
debugger;
$animate.addClass(el, 'wobbler', function () {
$animate.removeClass(el, 'wobbler')
});
}
});
});
}
}
})();
我成功了,但是我的控制台出现错误。我知道就 Angular 而言,我已经做了很大的 "No No",但我不确定还能怎么做。
这是我的控制台中的错误。
错误:[$rootScope:inprog] $apply 已经在进行中
这是我的工作代码。
(function () {
'use strict'
ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler])
function cfWobbler($animate, $parse) {
var ret = {
restrict: 'A',
link: link
}
return ret;
function link(scope, elem, attrs) {
var el = document.getElementById('division-holder');
var fn = $parse(attrs['cfWobbler']);
elem.on('click', function () {
scope.$apply(function () {
if (fn(scope) === '') {
debugger;
$animate.removeClass(el, 'bounceInDown');
$animate.removeClass(el, 'wobbler');
scope.$apply();
$animate.addClass(el, 'wobbler');
}
});
});
}
}
})();
成功了,控制台没有错误。
(function () {
'use strict'
ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler])
function cfWobbler($animate, $parse) {
var ret = {
restrict: 'A',
link: link
}
return ret;
function link(scope, elem, attrs) {
var el = document.getElementById('division-holder');
var fn = $parse(attrs['cfWobbler']);
elem.on('click', function () {
scope.$apply(function () {
$animate.removeClass(el, 'bounceInDown');
$animate.removeClass(el, 'wobbler');
});
scope.$apply(function () {
if (fn(scope) === '') {
$animate.addClass(el, 'wobbler');
}
});
});
}
}
})();
我正在使用自定义指令在页面上的指定字段为空白时触发元素上的动画。截至目前,当用户使用我的自定义指令单击按钮时,动画将起作用一次。再次单击按钮不会触发动画,我不确定为什么。我尝试将 .then() 与 $animate 服务一起使用,但没有成功。
提前感谢您any/all的帮助。
(function () {
'use strict'
ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler])
function cfWobbler($animate, $parse) {
var ret = {
restrict: 'A',
link: link
}
return ret;
function link(scope, elem, attrs) {
var el = document.getElementById('division-holder');
var fn = $parse(attrs['cfWobbler']);
elem.on('click', function () {
scope.$apply(function () {
if (fn(scope) === '') {
$animate.removeClass(el, 'bounceInDown');
debugger;
$animate.addClass(el, 'wobbler', function () {
$animate.removeClass(el, 'wobbler')
});
}
});
});
}
}
})();
我成功了,但是我的控制台出现错误。我知道就 Angular 而言,我已经做了很大的 "No No",但我不确定还能怎么做。
这是我的控制台中的错误。
错误:[$rootScope:inprog] $apply 已经在进行中
这是我的工作代码。
(function () {
'use strict'
ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler])
function cfWobbler($animate, $parse) {
var ret = {
restrict: 'A',
link: link
}
return ret;
function link(scope, elem, attrs) {
var el = document.getElementById('division-holder');
var fn = $parse(attrs['cfWobbler']);
elem.on('click', function () {
scope.$apply(function () {
if (fn(scope) === '') {
debugger;
$animate.removeClass(el, 'bounceInDown');
$animate.removeClass(el, 'wobbler');
scope.$apply();
$animate.addClass(el, 'wobbler');
}
});
});
}
}
})();
成功了,控制台没有错误。
(function () {
'use strict'
ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler])
function cfWobbler($animate, $parse) {
var ret = {
restrict: 'A',
link: link
}
return ret;
function link(scope, elem, attrs) {
var el = document.getElementById('division-holder');
var fn = $parse(attrs['cfWobbler']);
elem.on('click', function () {
scope.$apply(function () {
$animate.removeClass(el, 'bounceInDown');
$animate.removeClass(el, 'wobbler');
});
scope.$apply(function () {
if (fn(scope) === '') {
$animate.addClass(el, 'wobbler');
}
});
});
}
}
})();