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自动包装大部分内置指令，因此它将通过摘要循环进行更新，但如果你绑定自己的事件（即mouseenter和mouseleave），你需要踢它消化循环自己。

Updated Plnkr

根据以下评论进行更新

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

<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

从指令链接传递范围变量

1 个答案: