web-dev-qa-db-ja.com

AngularJS-子ディレクティブコントローラーにアクセスします

子ディレクティブコントローラーにアクセスする方法は？具体的には、親ディレクティブ内に存在するすべてのngModelControllerにアクセスする必要があります。例：

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

それで、「parentDirective」が「model1」と「model2」のngModelControllersにアクセスする方法はありますか？

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-model
13
Christian

更新

jqLit​​e extras methods には、要素に関連付けられた特定のコントローラーを取得するためのコントローラーメソッドもあります。したがって、ng-modelsを照会し、コントローラー名をangular.element(el).controller('ngModel')として取得することもできます。

controller（name）-現在の要素またはその親のコントローラーを取得します。デフォルトでは、ngControllerディレクティブに関連付けられたコントローラーを取得します。名前がキャメルケースディレクティブ名として指定されている場合、このディレクティブのコントローラーが取得されます（例： 'ngModel'）。

また、angularは、要素に関連付けられたコントローラーをそのデータに配置します。同様に、ディレクティブに関連付けられたngModelコントローラーインスタンスは、$ngModelControllerを介してアクセスできます。したがって、実際にアクセスして、ngModelインスタンスを使用して実行していることをすべて実行できます。ただし、これは完全に非標準的な方法です。これは、$ngModelControllerが文書化されておらず、将来のバージョンで実装が変更されないという保証がないためです。

実装例：

.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

11
PSL