[英]Repeatable animation with AngularJS
当页面上的指定字段为空白时,我正在使用自定义指令来触发元素上的动画。 到目前为止,当用户单击带有我的自定义指令的按钮时,动画将起作用一次。 再次单击该按钮将不会触发动画,我不确定为什么。 我尝试将.then()与$ animate服务一起使用,但是没有运气。
在此先感谢您提供的任何/所有帮助。
(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做出了很大的“不反对”的决定,但是我不确定还有其他方法。
这是我的控制台中的错误。
错误:[$ 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'); } }); }); } } })();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.