Javascript 属性值更改时更新指令视图

我有大约10条使用隔离作用域的指令。它们都绑定到名为size的参数。因此，我计划创建一个通用指令suicomon，并将该指令包含在所有10个指令中。因此，我不需要对所有10条指令重复作用域：{size:'@}

在我当前的解决方案中，参数被正确地传递到指令中。但是，当值在外部更改时，指令中的值不会更改并应用

我的共同指示是：

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>

现在，当通过ng click将大小更改为小时，指令内的值不会更改。据我所知，ng click将触发$scope.$apply，它将重新呈现指令。看来我错了

---

谁能解释一下原因吗？如何修复它？或者有更好的解决方案吗？

< p>您可能想考虑使用$CaseFig来将大小存储在一个地方，然后在每个指令中检索它。 创建主模块时，请执行以下操作：

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

然后在通常情况下：

appCache.put('suiCommonSize',10)

在其他指令中使用：

appCache.get('suiCommonSize')

---

我应该补充一点，您还必须将appCache注入到您想要引用它的任何地方

这只是一个观点，但我觉得在每个指令中使用scope:{size:'@}比创建一个将参数注入其他指令的指令更清晰、更易于维护。更难理解你的生活中发生了什么directives@Okazari谢谢你的建议。我想有更好的方法来实现这一点。它实际上不需要$cacheFactory。在这种情况下，appCache可以只是一个空对象，但可以，一个用于存储公共数据的服务是可以的。