javascript 指令可以从父作用域中删除自身吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27934426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can a directive delete itself from a parent scope
提问by Matt
Let's say I have the following code
假设我有以下代码
<div ng-app="app" ng-controller="controller">
<div ng-repeat="instance in instances>
<customDirective ng-model="instance"></customDirective>
</div>
</div>
And my custom directive has an isolated scope, defined as:
我的自定义指令有一个独立的范围，定义为：
app.directive('customDirective', function($log) {
return {
restrict: 'E',
templateUrl: './template.htm',
scope: {_instance:"=ngModel"},
link: function($scope) {
....
}
});
In this directive, I have to option to delete it. My question is how can I communicate back to the array instances in the parent scope and tell it to destroy this object and in effect remove the deleted instance from my DOM?
在这个指令中，我必须选择删除它。我的问题是如何与父作用域中的数组实例通信并告诉它销毁此对象并实际上从我的 DOM 中删除已删除的实例？
Hope that makes sense.
希望这是有道理的。
回答by Lautaro Cozzani
according to New Dev in a previous comment, this is the way:
根据 New Dev 在之前的评论中的说法，这是这样的：
var app = angular.module('app', [])
.directive('customDirective', function($log) {
return {
restrict: 'EA',
template: '<a href="" ng-click="onRemove()">remove me {{model.n}}</a>',
scope: {
model:"=",
onRemove:"&"
}
}
})
.run(function($rootScope) {
$rootScope.instances = [{n:1},{n:2},{n:3},{n:4}];
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-repeat="i in instances">
<custom-directive model="i" on-remove="instances.splice($index,1)">
</custom-directive>
</div>
</div>回答by Reactgular
First, don't use ngModelas a DOM attribute. This is an AngularJS directive used to bind form inputs to scope variables.
首先，不要ngModel用作 DOM 属性。这是一个 AngularJS 指令，用于将表单输入绑定到作用域变量。
I've renamed it to modeland added an extra attribute called index.
我已将其重命名为model并添加了一个名为index.
<div ng-app="app" ng-controller="controller">
<div ng-repeat="instance in instances>
<customDirective model="instance" index="$index"></customDirective>
</div>
</div>
Now in your controller you can listen for events (such as a custom event you might title removeCustom) emitted by children using $scope.$on().
现在，在您的控制器中，您可以removeCustom使用$scope.$on().
app.controller('controller',function($scope) {
$scope.instances = [.....];
$scope.$on('removeCustom',function($index) {
delete $scope.instances[$index];
});
});
Then in your custom directive you have to use $scope.$emit()to broadcast your removeCustomevent upthe scope hierarchy to the controller.
然后在您的自定义指令中，您必须使用$scope.$emit()将您的removeCustom事件沿范围层次结构向上广播到控制器。
app.directive('customDirective', function($log) {
return {
restrict: 'E',
templateUrl: './template.htm',
scope: {
model:"=",
index:"="
},
link: function($scope,$el,$attr) {
// when you need to remove this
$scope.$emit('removeCustom',$scope.index);
}
});
FYI: A directive can always remove itselfby calling $el.remove()in the link function, but since your directive is created via a ngRepeatit will just get recreated in the next digest. So you have to tell the controller to remove it from the instancesarray.
仅供参考：指令始终可以通过调用链接函数来删除自身$el.remove()，但是由于您的指令是通过 a 创建的，ngRepeat因此它只会在下一个摘要中重新创建。所以你必须告诉控制器将它从instances数组中删除。
