當屬性值改變時更新指令視圖

我有大約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。似乎我錯了...

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

來源

2015-09-04 Joy

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

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

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

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

然後在suiCommon使用：

appCache.put('suiCommonSize',10)

，並在其他指令使用：

appCache.get('suiCommonSize')

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

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

來源

2015-09-04 13:23:05

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

當屬性值改變時更新指令視圖

回答

相關問題