2015-09-04 76 views
0

我有大約10個指令使用隔離範圍。它們都綁定到名爲size的參數。所以我打算創建一個通用指令suiCommon並在所有10個指令中包含此指令。所以我不需要爲所有10個指令重複scope: { size: '@' }當屬性值改變時更新指令視圖

在我當前的解決方案JSFiddle中,該參數正確傳遞到指令中。但是,當外部值更改時,指令中的值不會更改並應用。

我共同的指令是:

angular.module('sui.common', []) 
    .directive('suiCommon', ['$timeout', function ($timeout) { 
    return { 
     restrict: 'A', 
     link: function (scope, iElement) { 
      var $parentElement = iElement.parent(); 
      $timeout(function() { 
       scope.vm.size = $parentElement.attr('size'); 
      }); 
     } 
    } 
}]); 

我的一個10個指令是這樣的:

angular.module('sui.rating', ['sui.common']) 
    .directive('suiRating', [function() { 
    return { 
     restrict: 'A', 
     scope: {}, 
     template: 
      '<div sui-common class="ui {{vm.size}} rating sui-rating">Content</div>', 
     controllerAs: 'vm', 
     bindToController: true, 
     controller: ['$scope', function ($scope) {}] 
    }; 
}]); 

這裏是HTML:

<div ng-app="Joy" ng-controller="JoyCtrl as vm"> 
    <div ng-click="vm.setSize()">Click to change size</div> 
    <div sui-rating size="{{vm.size}}"></div> 
</div> 

現在,當size更改爲small通過ng-click,指令內的值不是cha nged。根據我的理解,ng-click將觸發$scope.$apply,這將重新呈現指令suiCommon。似乎我錯了...

有人請解釋原因嗎?如何解決它?還是有更好的解決方案?

+1

只是一個意見,但我覺得在每個指令中有「範圍:{size:'@'}」比創建一個將參數注入其他指令的指令更清晰和可維護。這將是很難理解你的指令發生了什麼 – Okazari

+0

@Okazari感謝您的建議。我想有一些更好的方法來實現這一點。並將等待更多的意見。 – Joy

回答

0

您可能想要考慮使用$ cacheFactory將大小存儲在一個位置,然後在每個指令中檢索它。

.factory('appCache', function ($cacheFactory) { 
    var results = $cacheFactory('CurrentOrderCache'); 
    return results; 
}) 

然後在suiCommon使用:

appCache.put('suiCommonSize',10) 

,並在其他指令使用:

appCache.get('suiCommonSize') 

我應該當你創建你的主模塊

做這樣的事情補充說,你還必須在需要引用它的任何地方注入appCache。

+0

在這種情況下,它並不真的需要$ cacheFactory,appCache可以只是一個空對象,但是,用於存儲公共數據的服務是可以的。 – estus

相關問題