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

时间:2015-09-04 12:55:43

标签: javascript angularjs angular-directive

我有10个使用隔离范围的指令。它们都绑定到名为size的参数。所以我计划创建一个通用指令suiCommon并在所有10个指令中包含该指令。所以我不需要为所有10个指令重复scope: { size: '@' }

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

我的共同指示是:<​​/ p>

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更改为smallng-click时,指令内的值不会更改。据我了解,ng-click会触发$scope.$apply,它会重新呈现指令suiCommon。好像我错了......

有人可以解释原因吗?怎么解决?或者有更好的解决方案吗?

1 个答案:

答案 0 :(得分:0)

您可能需要考虑使用$ cacheFactory将大小存储在一个位置,然后在每个指令中检索它。

创建主模块时执行以下操作:

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

然后在suiCommon使用:

appCache.put('suiCommonSize',10)

并在其他指令中使用:

appCache.get('suiCommonSize')

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