我有下一个代码：
<body ng-app="vote">
<div>
<div class="vote">
<button ng-disabled="this.isDisabled" voteplus>+</button>
</div>
<div class="vote">
<button ng-disabled="isDisabled" voteplus>+</button>
</div>
<div class="vote">
<button ng-disabled="isDisabled" voteplus>+</button>
</div>
<div class="vote">
<button ng-disabled="isDisabled" voteplus>+</button>
</div>
<div class="vote">
<button ng-disabled="isDisabled" voteplus>+</button>
</div>
</div>
</body>
和指令：
angular.module('vote', [])
.directive('voteplus', function() {
return {
link: function(scope, element, attrs) {
element.bind('click', function(e){
scope.isDisabled = true;
scope.$apply();
});
}
}
});
它的工作原理，但它禁用页面上的所有元素，我只需要当前。我应该改善什么？
最佳答案
您需要为指令创建新的作用域：
.directive('voteplus', function() {
return {
scope: true, // <-- add this
link: function(scope, element, attrs) {
element.bind('click', function(e){
scope.isDisabled = true;
scope.$apply();
});
}
}
});
使用
scope: true告诉指令创建一个新的子范围（原型继承自基本范围）。在这种情况下，scope.isDisabled = true将仅更改本地子标志。