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

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

我的一个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，指令内的值不是cha nged。根据我的理解，ng-click将触发$scope.$apply，这将重新呈现指令suiCommon。似乎我错了...

有人请解释原因吗？如何解决它？还是有更好的解决方案？

来源

2015-09-04 Joy

只是一个意见，但我觉得在每个指令中有“范围：{size：'@'}”比创建一个将参数注入其他指令的指令更清晰和可维护。这将是很难理解你的指令发生了什么 – Okazari

@Okazari感谢您的建议。我想有一些更好的方法来实现这一点。并将等待更多的意见。 – Joy

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

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

然后在suiCommon使用：

appCache.put('suiCommonSize',10)

，并在其他指令使用：

appCache.get('suiCommonSize')

我应该当你创建你的主模块

做这样的事情补充说，你还必须在需要引用它的任何地方注入appCache。

来源

2015-09-04 13:23:05

在这种情况下，它并不真的需要$ cacheFactory，appCache可以只是一个空对象，但是，用于存储公共数据的服务是可以的。 – estus

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

回答

相关问题