Обновить директивное представление при изменении значения атрибута

Question

У меня есть 10 директив, использующих области выделения. Все они привязываются к параметру с именем size. Поэтому я планирую создать общую директиву suiCommon и включить эту директиву во все 10 директив. Так что мне не нужно повторять scope: { size: '@' } для всех 10 директив.

В моем текущем решении 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, значение внутри директивы не является ча nged. В моем понимании, ng-click вызовет $scope.$apply, который будет переопределять директиву suiCommon. Кажется, я ошибаюсь ...

Может кто-нибудь объяснить причину? Как это исправить? Или есть лучшее решение?

Answer 1

Возможно, вам захочется использовать $ cacheFactory для хранения размера в одном месте, а затем просто получить его в каждой директиве.

ли что-то вроде этого, когда вы создаете свой главный модуль:

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

Тогда в использовании suiCommon:

appCache.put('suiCommonSize',10) 

и в других директивах использовать:

appCache.get('suiCommonSize') 

I Should добавьте, что вам также придется вводить appCache везде, где вы хотите ссылаться на него.