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