从指令链接传递范围变量

passing scope variable from directive link

本文关键字：范围 变量 指令 链接      更新时间：2023-09-26

我做了一个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');
        });
      }
};
});

和内部指令.html：

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

这是 plunkr 上的实时代码

问题是元素内部的作用域.bin没有设置变量"overState"的值，有人可以解释为什么会发生这种情况以及如何解决它。

你需要使用$scope.$apply：

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

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

更新的 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>

内置指令 Plnkr

相关文章：