我在使用 angularjs 中的嵌套指令时遇到了一些问题。我想从另一个指令中的指令调用 Controller 方法,并试图将参数传递给它,但它们是未定义的。
我正在尝试使用下面 selected.html 中的三个参数调用 remove()。在我引入父指令 (televisionFilter.js) 之前,它一直在工作。任何人都可以建议如何将它们传递给 Controller 吗?
谢谢!
代码:
Controller .js
$scope.remove = function(selectorToRemove, choicesArr, selectedArr){
console.log(selectorToRemove); //undefined
console.log(choicesArr); //undefined
console.log(selectedArr); //undefined
};
televisionFilter.js
angular.module('app.directives').directive('televisionFilter', function(){
return{
restrict: 'A',
templateUrl: 'js/templates/television-filter.html',
scope: {
search: '=',
selectedBrand: '=',
submit: '&',
remove: '&'
}
};
});
selected.js
angular.module('app.directives').directive('selected', function(){
return{
restrict: 'A',
templateUrl: 'js/templates/selected.html',
scope:{
choicesArr: '=',
selectedArr: '=',
remove: '&'
}
};
});
列表.html
<div television-filter search='televisionSearch' submit="submit()" selected-brand='selectedBrand' remove='remove(selectorToRemove, choicesArr, selectedArr)'></div>
电视过滤器.html
<div selected selected-arr='search.selectedBrands' choices-arr='search.brands' remove='remove(selectorToRemove, choicesArr, selectedArr)'>
selected.html
<ul>
<li ng-repeat="selected in selectedArr" class="filter-autocomplete-list" ng-click="remove({selectorToRemove:selected, choicesArr:choicesArr,selectedArr:selectedArr})">
<span class="label label-default label-text">{{selected}}</span>
</li>
</ul>
最佳答案
@charlietfl 和@angular_james 在评论中建议的答案虽然有效,但表现出糟糕的 Angular 实践。调用 $parent 违反了隔离范围 (&) 的要点。要使其正常工作,您只需修改中间指令 (television-filter.html),如下所示:
<div selected selected-arr='search.selectedBrands' choices-arr='search.brands' remove='remove({selectorToRemove: selectorToRemove, choicesArr: choicesArr, selectedArr: selectedArr})'>
关于javascript - 嵌套指令 - 无法将参数从 Angularjs 中的子指令传递给 Controller 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19667275/