嵌套指令 - 无法将 args 从 Angularjs 中的子指令传递给控制器​​方法 [英] Nested directives - cannot pass args to controller method from child directive in Angularjs

问题描述

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

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

谢谢！

代码:

controller.js

$scope.remove = function(selectorToRemove, choiceArr, selectedArr){console.log(selectorToRemove);//不明确的控制台日志(选择Arr)；//不明确的console.log(selectedArr);//不明确的};

televisionFilter.js

angular.module('app.directives').directive('televisionFilter', function(){返回{限制:'A'，templateUrl: 'js/templates/television-filter.html',范围: {搜索:'='，选择品牌: '=',提交:'&',删除:'&'}};});

selected.js

angular.module('app.directives').directive('selected', function(){返回{限制:'A'，templateUrl: 'js/templates/selected.html',范围:{选择Arr: '=',selectedArr: '=',删除:'&'}};});

list.html

<div TV-filter search='televisionSearch' submit="submit()" selected-brand='selectedBrand' remove='remove(selectorToRemove, selectionArr, selectedArr)'></div>

television-filter.html

selected.html

<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>

解决方案

@charlietfl 和 @angular_james 在评论中建议的答案虽然有效，但表现出糟糕的角度实践.调用 $parent 违反了隔离范围 (&) 的要点.为了让它工作，你只需要修改中间指令 (television-filter.html) 如下:

<代码><div selected selected-arr='search.selectedBrands'choices-arr='search.brands' remove='remove({selectorToRemove: selectorToRemove,choiceArr:choiceArr, selectedArr: selectedArr})'>

更新的 plunkr

I'm having some trouble with nested directives in angularjs. I want to call a controller method from a directive within another directive and am trying to pass arguments to it, however they are undefined.

I'm attempting to call remove() with three arguments from selected.html below. It was working before I introduced a parent directive (televisionFilter.js) Can anyone suggest what to do to pass these to the controller?

Thanks!

Code:

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: '&'
  } 
  };
});

list.html

<div television-filter search='televisionSearch' submit="submit()" selected-brand='selectedBrand' remove='remove(selectorToRemove, choicesArr, selectedArr)'></div>

television-filter.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>

解决方案

The answers suggested in the comments by @charlietfl and @angular_james, although working, exhibit bad angular practice. Calling $parent violates the point of your isolated scope (&). To get it working, you just have to modify the of the middle directive (television-filter.html) as follows:

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

Updated plunkr

这篇关于嵌套指令 - 无法将 args 从 Angularjs 中的子指令传递给控制器​​方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！