DOMを操作するAngularJSディレクティブと通信する

Question

私は現在、<li>をクリックしてngClickでいくつかのデータを送信できる単純な1ページアプリケーションを開発中です。この<li> sの私がangular.elementとすべてのものにCSSスタイルを適用<div>親を持っている...

私はこのngClickをクリックすると、問題は、私はいくつかの$http呼び出しを行うと、内部コントローラ変数を埋めるためにJSONを取得することです。したがって、コントローラとディレクティブの点で共通点がない他のメニューをユーザがクリックすると、別のリストが埋められ、ユーザがこのリストをクリックすると、前述の<li>のスタイルを設定する必要があります。

directiveにあるlinkの参照をどのように伝えるべきか、わからないいくつかのプロパティでスタイルを設定する必要があります。私は、コントローラから指示文に渡す情報を格納するサービスを使うことを考えましたが、私はAngularを初めて使っていて、何をすべきか分かりません。私は多くを検索しましたが、私が探しているものを正確に見つけられませんでした。私は$watchを使用することを考えましたが、私の変数はそれがコントローラ上にあることを監視するため、私は親スコープに2回戻ってそれに到達する必要があります。

ありがとうございます！

Answer 1

<div ng-controller="Ctrl as ctrl" ng-style="ctrl.style"> 
    <my-dir on-fetch="ctrl.style = $style"></my-dir> 
</div> 

module.directive('myDir', function(){ 
    return { 
     restrict: 'E', 
     template: '<li ng-click="$ctrl.fetch()"></li>', 
     controller: function(){ 
      var $ctrl = this; 
      this.fetch = function(){ 
       api.fetch().then(function(stylesFromResponse){ 
        $ctrl.onFetch({$style: stylesFromResponse}); 
       }); 
      }; 
     }, 
     bindToController: true, 
     controllerAs: '$ctrl', 
     scope: { 
      onFetch: '&' 
     } 
    }; 
});