7

我在使用 angularjs 中的嵌套指令时遇到了一些问题。我想从另一个指令中的指令调用控制器方法,并尝试将参数传递给它,但是它们是未定义的。

我正在尝试使用下面 selected.html 中的三个参数调用 remove() 。在我引入父指令(televisionFilter.js)之前它正在工作任何人都可以建议如何将这些传递给控制器​​吗?

谢谢!

代码:

控制器.js

$scope.remove = function(selectorToRemove, choicesArr, selectedArr){
 console.log(selectorToRemove); //undefined
 console.log(choicesArr); //undefined
 console.log(selectedArr); //undefined
};

电视过滤器.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>

电视-filter.html

<div selected selected-arr='search.selectedBrands' choices-arr='search.brands' remove='remove(selectorToRemove, choicesArr, selectedArr)'>

选定的.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>
4

1 回答 1

4

@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})'>

更新了 plunkr

于 2014-03-28T19:38:57.777 回答