Angularjs - 追加與NG-顯示ATTR元素指令

Question

我有一個簡單的指令，像這樣：

.directive("test", function($compile) { 
    var directive = {}; 
    directive.restrict = 'AE'; 
    directive.scope = { 
     options: '=testattr' 
    }; 
    directive.link = function(scope, element, attr) { 
     element.wrap('<div class="whatever"></div>'); 
     var el = angular.element('<div class="test" ng-show="showBar"></div>'); 
     $compile(el)(scope); 
     element.parent().append(el); 

     scope.isOverPanel = false; 
     scope.showBar = false; 
     element.on('mouseover', function(){ 
      console.log('mouseover'); 
      scope.isOverPanel = true; 
      scope.showBar = true; 
     }); 
     element.on('mouseleave', function(){ 
      console.log('mouseleave'); 
      scope.isOverPanel = false; 
      scope.showBar = false; 
     }); 
    }; 

    return directive; 
}); 

出於某種原因，在div只顯示了，當我點擊元素上，而不是在鼠標懸停。它也不會在mouseleave上消失。我可以在控制檯看到mouseover和mouseleave事件觸發。可能是什麼問題呢？

Answer 1

這些都不是本土角事件，所以你需要範圍適用於這兩種情況下（鼠標離開/鼠標懸停）

element.on('mouseleave', function(){ 
      scope.$apply(function(){ 
       scope.isOverPanel = false; 
       scope.showBar = false; 
      }); 

     }); 

這是因爲你使用jQuery來註冊這些事件，並因此它們未知的角度和其消化週期。

您可以嘗試使用本地角度指令來執行鼠標事件。示例：https://docs.angularjs.org/api/ng/directive/ngMouseover