嵌套指令 - 不能从Angularjs子指令传递args设置为控制器的方法 [英] Nested directives - cannot pass args to controller method from child directive in Angularjs

问题描述

我有一些麻烦，在angularjs嵌套指令。我想从另一个调用指令中指令的控制器的方法，我试图将参数传递给它，但是他们是不确定的。

我试图调用remove（）从下selected.html三个参数。这是工作之前我介绍了一个家长指令（televisionFilter.js）任何人都可以建议做这些传递给控制器​​什么呢？

谢谢！

code：

controller.js

  $ scope.remove =功能（selectorToRemove，choicesArr，selectedArr）{
 的console.log（selectorToRemove）; //未定义
 的console.log（choicesArr）; //未定义
 的console.log（selectedArr）; //未定义
};
 

televisionFilter.js

  angular.module（'app.directives'）。指令（televisionFilter'，函数（）{
  返回{
    限制：'A'，
    templateUrl：JS /模板/电视-fil​​ter.html'，
    范围： {
      搜索：'='，
      SELECTEDBR以及：'='，
      提交：'和;，
      删除：'和;'
    }
  };
}）;
 

selected.js

  angular.module（'app.directives'）。指令（'选择'，函数（）{
  返回{
    限制：'A'，
    templateUrl：JS /模板/ selected.html'，
    范围：{
    choicesArr：'='，
    selectedArr：'='，
    删除：'和;'
  }
  };
}）;
 

list.html

 ＆LT; D​​IV电视过滤搜索='televisionSearch'提交=提交（）入选​​品牌='SELECTEDBR以及'删除='删除（selectorToRemove，choicesArr，selectedArr）'＆GT ;＆LT; / DIV＆GT;
 

电视-fil​​ter.html

 ＆LT; D​​IV选择选择-ARR ='search.selectedBrands选择 -  ARR ='search.brands'删除='删除（selectorToRemove，choicesArr，selectedArr）'＆GT;
 

selected.html

 ＆LT; UL＆GT;
  ＆LT;李NG重复=，在selectedArr选择阶级=过滤器自动完成列表NG点击=删除（{selectorToRemove：选择choicesArr：choicesArr，selectedArr：selectedArr}）＆GT;
  ＆LT;跨度类=标签标签默认标签文本＆GT; {{}选择}＆LT; / SPAN＆GT;
  ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

在由@charlietfl和@angular_james的意见建议，虽然工作，表现出不好的角实践的答案。调用$父侵犯了您的隔离范围的点（安培）。得到它的工作，你只需要修改中间指令（电视-fil​​ter.html）如下：


＆LT; D​​IV选择选择-ARR ='search.selectedBrands选择 - ARR ='search.brands'删除='删除（{selectorToRemove：selectorToRemove，choicesArr：choicesArr，selectedArr：selectedArr}）＆GT;


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

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