我希望使用$ animate库应用一些CSS类,并且在我的指令中希望在CSS动画完成后切换范围变量值。我希望使用ng-show
指令显示DIV,当满足条件(scope.showPopover === true
)时,我希望显示该项目,然后它必须消失。我有一个自定义指令来执行CSS淡入淡出并重置ng-show的条件...这是我的代码
<!-- here is the popover, the showPopover and popoverNeeded scope variables are in my controller -->
<div data-ng-if="popoverNeeded === true" class="nav-popover" data-fade-animation data-ng-show="showPopover">
I am a popover that will toggle, then fade away....
</div>
这是我的控制器变量...
$scope.popoverNeeded = true;
$scope.showPopover = false;
这是我的自定义指令
.directive('fadeAnimation', function ($animate) {
'use strict';
return {
restrict: 'A',
priority: 800,
link: function (scope, element) {
console.log(scope.showPopover); // false
scope.$watch(scope.showPopover, function (newValue, oldValue) {
console.log(newValue, oldValue); // undefined undefined
if(newValue === true) {
$animate.addClass(element, 'fade-animiate').then(function() {
element.removeClass('fade-animiate');
scope.showPopover = false;
});
}
});
}
};
});
这是我的CSS ...
.fade-animiate {
animation: fade-animiate 2s;
-webkit-animation: fade-animiate 2s;
animation-fill-mode: forwards;
animation-delay: 5s;
-webkit-animation-delay: 5s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
}
@keyframes fade-animiate {
from {
opacity: 1;
display: block;
}
to {
opacity: 0;
display: none;
}
}
@-webkit-keyframes fade-animiate {
from {
opacity: 1;
display: block;
}
to {
opacity: 0;
display: none;
}
}
现在,当视图/页面加载时,输出的
scope.showPopover
值是正确的,我们在控制台中看到了false
。监视值输出为undefined, undefined
。但是,当我切换scope.showPopover
值时,手表不会执行任何操作。我对指令不是很坚强,谁能告诉我我要去哪里错了。提前致谢。
最佳答案
您不要在$watch
中的值前面加上scope
(它也需要一个字符串供var观看):
scope.$watch("showPopover", function (newValue, oldValue) {
关于javascript - AngularJS作用域。指令中的$ watch不会引发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28815343/