Question

我有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更改为small到ng-click时，指令内的值不会更改。据我了解，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')

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

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

1 个答案: