javascript - 从指令链接传递范围变量

Question

我制作了一个 angularjs 指令，如下所示:

angular.module('myApp')
.driective('myDirective', function(){
 return {
  templateUrl: 'directive.html',
      restrict: 'E',
      scope: {
        'dirObj': '=object'
      },
      link: function (scope, element, attrs) {
        scope.message = "View Message";

        element.bind('mouseenter', function(){
          scope.overState = true;
          console.log('enter');
        });

        element.bind('mouseleave', function(){
          scope.overState = false;
          console.log('leave');
        });

      }
};
});

以及directive.html内部:

<h1>{{ message }}</h1>
<div ng-show="overState">This text doesn't appear!!!</div>

这是 plunkr 上的实时代码

问题是 element.bin 内的范围没有设置变量“overState”的值，有人可以解释一下为什么会发生这种情况以及如何修复它。

Answer 1

您需要使用$scope.$apply:

scope.$apply(function() { 
    scope.overState = true;
});

Angular 会自动包装大部分内置指令，因此它将通过摘要循环进行更新，但如果您绑定(bind)自己的事件(即 mouseenter 和 mouseleave)，需要自己关闭摘要循环。

Updated Plnkr

<小时/>

根据以下评论进行更新

您还可以使用内置的 Angular Directive(指令) ng-mouseenter 和 ng-mouseleave，然后您无需担心自己评估 Angular 表达式。

<div class="directive-area" 
     ng-mouseleave="overState = false" 
     ng-mouseenter="overState = true">
  <h1>{{ message }}</h1>
  <div ng-show="overState">Test Text</div>
</div>

Built-in Directives Plnkr