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

Update directive view when attribute value is changed

本文关键字：更新 指令 视图 改变 属性      更新时间：2023-09-26

我有大约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');
            });
        }
    }
}]);

我的十个指令中有一个是这样的:

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通过ng-click变为small时，指令内部的值没有改变。在我的理解中，ng-click将触发$scope.$apply，这将重新渲染指令suiCommon。看来我错了……

谁能解释一下原因?如何解决这个问题?或者有更好的解决方案吗?

您可以考虑使用$cacheFactory将大小存储在一个地方，然后在每个指令中检索它。

在创建主模块时，执行如下操作:

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

Then在ui中常用:

appCache.put('suiCommonSize',10)

，在其他指令中使用:

appCache.get('suiCommonSize')

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

相关文章：