AngularJS範圍。$手錶指令不提高

Question

我想用$動畫庫，應用一些CSS類和我的指令中我想切換某個範圍變量值onve的CSS動畫完成。我想用ng-show指令，當該條件滿足（scope.showPopover === true）我要展示的項目，那麼它必須消逝顯示一個DIV。我有一個自定義指令來執行CSS褪色和重置爲NG-顯示的條件......這是我的代碼

<!-- 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值手錶什麼都不做。我的指令並不是很強大，任何人都可以告訴我我錯在哪裏。

在此先感謝。

Answer 1

您不要在$watch與scope前綴值（它也需要爲VAR觀看字符串）：

scope.$watch("showPopover", function (newValue, oldValue) {