與操作 DOM 的 AngularJS 指令通信

Question

我目前正在開發一個簡單的單頁應用程序，您可以在其中單擊一些<li>並且您可以使用ngClick發送一些數據。 這個<li>有一個父<div> ，我在那里應用帶有angular.element和所有這些東西的 CSS 樣式......

問題是當我點擊這個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: '&'
       }
    };
});