javascript AngularJS - 访问子指令控制器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27808609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 08:01:29  来源:igfitidea点击:

AngularJS - Access child directive controller

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-model

提问by Christian

How to access the child directive controllers? Specifically, I need to access all ngModelController(s) which are present inside a parent directive. Example:

如何访问子指令控制器?具体来说,我需要访问父指令中存在的所有 ngModelController(s)。例子:

<parent-directive>
  <input type="text" ng-model="model1"/>
  <input type="text" ng-model="model2"/>
</parent-directive>

So, is there a way for "parentDirective" to get access to the ngModelControllers for "model1" and "model2"?

那么,“parentDirective”有没有办法访问“model1”和“model2”的ngModelControllers?

采纳答案by PSL

Update

更新

jqLite extras methodsalso has a controller method to retrieve the specific controller associated to the element. So you can query for the ng-models and get the controller name as angular.element(el).controller('ngModel')as well.

jqLit​​e extras 方法还有一个控制器方法来检索与元素关联的特定控制器。因此,您可以查询 ng-models 并获取控制器名称angular.element(el).controller('ngModel')

controller(name) - retrieves the controller of the current element or its parent. By default retrieves controller associated with the ngController directive. If name is provided as camelCase directive name, then the controller for this directive will be retrieved (e.g. 'ngModel').

controller(name) - 检索当前元素或其父元素的控制器。默认情况下检索与 ngController 指令关联的控制器。如果 name 作为camelCase 指令名称提供,则将检索该指令的控制器(例如'ngModel')。



angular also places the controller associated with an element on its data. Similarly ngModel controller instance associated with the directive is accessibly via $ngModelController. So you could actually access it and use the ngModel instance to do whatever you are doing. However this is completely a non standard way of doing it, because $ngModelControlleris undocumented and there is no guarantee the implementation will not change in future versions.

angular 还将与元素关联的控制器放置在其数据上。同样,与指令关联的 ngModel 控制器实例可通过$ngModelController. 所以你实际上可以访问它并使用 ngModel 实例来做你正在做的任何事情。然而,这完全是一种非标准的做法,因为$ngModelController它没有记录,并且不能保证在未来的版本中实现不会改变。

An example implementation:

一个示例实现:

.directive('parentDirective', function($timeout){
  return{
    restrict:'E',
    link:function(scope, elm){
      /*Get the elements with the attribute ng-model, in your case this could just be elm.children()*/
      var elms = [].slice.call(elm[0].querySelectorAll('[ng-model]'), 0);

      /*get the ngModelControllerArray*/
      var controllers = elms.map(function(el){ 
          return angular.element(el).controller('ngModel');
          //return angular.element(el).data('$ngModelController');
      });

       /*As a sample implementation i am registering a view value listener for these controller instances*/
       controllers.forEach(function(ngModel){
         ngModel.$viewChangeListeners.push(logViewChange.bind(null, ngModel));
       });

       function logViewChange(ngModel){
           console.log(ngModel.$name, ngModel.$viewValue);
       }
    }
  }
});

Plnkr

普林克