我试图在一个指令中包含多个div。但该指令只适用于第一个div,并将其他div留在其中
模板代码:
<div actor-check-box ng-repeat="actor in actors">
<div create-connections class="actor{{$index}}" >
<span><input class="checkbox-actor" type="checkbox" name="actor-checkbox" id="actor-checkbox{{$index}}">{{actor}}</span>
</div>
<div ng-repeat="activity in activities">
<div ng-if="actor == activity.id">
<div ng-repeat = "impact in activity.text" >
<div update-connections class="impact{{$index}}actor{{actors.indexOf(actor)}}" actor-id="actor{{actors.indexOf(actor)}}">
<span><input class="checkbox-activity" type="checkbox" name="impact-checkbox" id="activity-checkbox{{$index}}actor{{actors.indexOf(actor)}}" activity-check-box>{{impact}}</span>
</div>
<div ng-repeat="feature in features">
<div ng-if="actor == feature.id && impact == feature.key">
<div feature-connection ng-repeat = "feature in feature.text" class="feature{{$index}}" activity-id="impact{{activity.text.indexOf(impact)}}actor{{actors.indexOf(actor)}}" id="">
<span><input class="checkbox" type="checkbox" name="impact-checkbox" id="" >{{feature}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
指令代码:
angular.module('mainModule').directive('actorCheckBox', function($interval) {
return {
restrict: 'EA',
/*transclude: true,*/
link: function (scope, element, attrs, ctrl) {
scope.$watch('ngModel', function(newValue){
/*alert(newValue);*/
console.log(element.find('input[type="checkbox"]'));
/*console.log(element.find('input[class="checkbox-actor"]'));*/
console.log(element.find('input[class="checkbox-activity"]'));
console.log(attrs);
});
}
}
});
控制台输出:
[input#actor-checkbox0.checkbox-actor, prevObject: o.fn.init[1], context: div.ng-scope, selector: "input[type="checkbox"]"]
[input#actor-checkbox1.checkbox-actor, prevObject: o.fn.init[1], context: div.ng-scope, selector: "input[type="checkbox"]"]
[input#actor-checkbox2.checkbox-actor, prevObject: o.fn.init[1], context: div.ng-scope, selector: "input[type="checkbox"]"]
所以问题是我有3个div,指令应用于第一个div在带有复选框的主div中还有2个div。当指令被调用时,console只显示maindiv中的checkbox元素,而不显示其他2个div的。从指令中添加控制台:
如果我包含transclude:true,它将删除元素上的所有早期指令,页面将变为空白。
这并没有发生,因为ng repeat为自己创建了单独的作用域。您还需要在div中包含,或者修改您的指令以不使用隔离的作用域。