javascript - AngularJS作用域。指令中的$ watch不会引发

我希望使用$ 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/