我制作了一个 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”的值,有人可以解释一下为什么会发生这种情况以及如何修复它。
最佳答案
您需要使用$scope.$apply
:
scope.$apply(function() {
scope.overState = true;
});
Angular 会自动包装大部分内置指令,因此它将通过摘要循环进行更新,但如果您绑定(bind)自己的事件(即 mouseenter
和 mouseleave
),需要自己关闭摘要循环。
根据以下评论进行更新
您还可以使用内置的 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>
关于javascript - 从指令链接传递范围变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27529101/