我已在我的应用程序上声明了以下自定义指令,
angular.module("MyApplication")
.directive("ParentTableRow", ParentTableRowDirective)
.directive("item", itemDirective);
itemDirective.$inject = ["$compile"];
这是parentTableRow指令的函数,
function ParentTableRowDirective($compile){
return {
restrict: "A",
replace:true,
template: '<div ng-repeat="item in collection" item="item">' +
'<div class="row {{item.type}}">' +
'<div class="col-md-6 item-name" ng-click="showChilds(item)">{{item.name}}</div>' +
'<div class="col-md-2 item-ask"><input type="checkbox" ng-model="item.ask" ng-click="selectItems(item,\'ask\')" /></div>' +
'<div class="col-md-2 item-proj"><input type="checkbox" ng-model="item.current_projection" ng-click="selectItems(item,\'current_projection\')" /></div>' +
'<div class="col-md-2 item-reg"> <input type="checkbox" ng-model="item.registration" ng-click="selectItems(item,\'registration\')" /></div>' +
'</div>' +
'</div>',
scope: {
collection: '='
}
};
}
以下是ItemDirective的功能,
function itemDirective($compile){
return {
restrict: "A",
scope: {
item: '='
},
link: function (scope, element, attrs) {
},
controller: function($scope, $element, $attrs){
$scope.selectItems = function(item,type) {
angular.forEach(item.children, function(item){
if(type == 'ask') {
item.ask = !item.ask;
}
else if(type == 'current_projection') {
item.current_projection = !item.current_projection;
}
else if(type == 'registration') {
item.registration = !item.registration;
}
});
}
}
}
}
问题陈述:选择/取消选择复选框事件($ scope.selectItems)将被触发除父元素之外的所有子元素(ItemDirective)。