與操縱DOM的AngularJS指令通信

我目前正在開發一個簡單的單頁應用程序，點擊一些<li>，您可以使用ngClick發送一些數據。這<li>■找父母<div>，我應用CSS樣式angular.element和所有的東西...與操縱DOM的AngularJS指令通信

問題是，當我點擊這個ngClick我做一些$http電話，並得到一個JSON填補內部控制變量。所以，當用戶點擊其他沒有任何共同點的菜單時（按照控制器和指令），我填入其他列表，當用戶點擊這個列表時，我必須設置前面提到的<li>，這是一個指令。

所以，我不知道如何告訴的link參考，它必須具有一些我不知道如何傳遞的屬性的樣式，也許服務可以讀取？我想使用一種服務來存儲從控制器傳遞給指令的信息，但是我對Angular是新手，我不知道該怎麼做。我搜查了很多，但沒有找到我正在尋找的東西。我想到了使用$watch，但我的變量來監視在控制器上，所以我必須回到父範圍，像2次回到達到它。

非常感謝！

來源

2016-09-23 matiaslauriti

你可以根據任何條件使用ng-style或ng-class。 – Hmahwish

我無法使用它，因爲我從JSON recibe了一些圖像，我將其用作將從數據庫加載的'background-image'。謝謝！ – matiaslauriti

<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: '&' 
     } 
    }; 
});

來源

2016-09-23 14:17:58

我幾乎不明白你寫的任何東西......你能否在你的回答中解釋，以便我可以適應它，謝謝！ – matiaslauriti

據我所知，你有指令，它應該獲取onClick數據，並在獲取數據時與父控制器進行通信。在我的示例中，獲取li是myDir，它在內部處理onClick，並在獲取準備就緒時處理調用控制器方法或外部代碼。 –

我編輯示例，展示如何爲外部代碼提供值 –

與操縱DOM的AngularJS指令通信

回答

相關問題