jeh*_*jeh 7 javascript angularjs angularjs-directive angularjs-scope angularjs-controller
我在angularjs中使用嵌套指令时遇到了一些麻烦.我想从另一个指令中的指令调用一个控制器方法,并试图将参数传递给它,但它们是未定义的.
我试图用下面的selected.html中的三个参数调用remove().它在我引入父指令之前工作(televisionFilter.js)任何人都可以建议如何将这些指令传递给控制器?
谢谢!
码:
controller.js
$scope.remove = function(selectorToRemove, choicesArr, selectedArr){
console.log(selectorToRemove); //undefined
console.log(choicesArr); //undefined
console.log(selectedArr); //undefined
};
Run Code Online (Sandbox Code Playgroud)
televisionFilter.js
angular.module('app.directives').directive('televisionFilter', function(){
return{
restrict: 'A',
templateUrl: 'js/templates/television-filter.html',
scope: {
search: '=',
selectedBrand: '=',
submit: '&',
remove: '&'
}
};
});
Run Code Online (Sandbox Code Playgroud)
selected.js
angular.module('app.directives').directive('selected', function(){
return{
restrict: 'A',
templateUrl: 'js/templates/selected.html',
scope:{
choicesArr: '=',
selectedArr: '=',
remove: '&'
}
};
});
Run Code Online (Sandbox Code Playgroud)
list.html
<div television-filter search='televisionSearch' submit="submit()" selected-brand='selectedBrand' remove='remove(selectorToRemove, choicesArr, selectedArr)'></div>
Run Code Online (Sandbox Code Playgroud)
电视filter.html
<div selected selected-arr='search.selectedBrands' choices-arr='search.brands' remove='remove(selectorToRemove, choicesArr, selectedArr)'>
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
@charlietfl 和 @angular_james 在评论中提出的答案虽然有效,但表现出糟糕的角度实践。调用 $parent 违反了隔离范围 (&) 的要点。要使其正常工作,您只需修改中间指令(television-filter.html),如下所示:
<div selected selected-arr='search.selectedBrands' choices-arr='search.brands' remove='remove({selectorToRemove: selectorToRemove, choicesArr: choicesArr, selectedArr: selectedArr})'>