Question

我有一个指令，它使用ng-repeat生成大量的html输入[type =“radio”]。他们每个人都分配了许多属性。

基本上：

<div ng-repeat"day in days">
  <label ng-repeat="slot in day.slots">
    <input type="radio" class="{{slot.class}}" value="{{slot.value}}" ng-disabled="{{slot.disabled}}">
  </label>
</div>

问题是angular为每个输入元素的每个属性添加了一个观察者，它消耗了大量资源。如果days未更改，则属性不会更改。有什么方法可以使属性静态并仍然使用ng-repeat？或者我必须以其他方式生成模板吗？在这种情况下，我将如何进行并在days更改时仍然重新渲染？

更新：澄清它不仅仅是类属性

Answer 1

尝试使用ng-class。

<input type="radio" ng-class="slot.class" />

观察者仍然受约束，但只有当slot.class的值发生变化时，才会在每次摘要发生时设置class属性。

编辑：更新以反映原始海报想要的内容。

我不确定这是否是一个好习惯，但你可以尝试编写一个指令，通过取消注册所有观察者来生成一个'哑'模板。这样，只有当watch语句的结果发生变化时，才会更新模板。

这样的事情：

module.directive('shallowWatch', function($compile){
    return {
        compile : function(tElement, tAttrs){
            var templateFN = $compile(tElement.html());
            tElement.empty();
            return function(scope, element, attrs){
                var childScope;
                scope.watch(attrs.shallowWatch, function(){
                    element.empty();
                    if(childScope){
                        childScope.$destroy();
                    }
                    childScope = scope.$new();
                    element.append(templateFn(childScope));
                    traverseScope(childScope, function(scope){
                        scope.$$watchers = [];
                    });
                });
            };
        }
    };

    function traverseScope(target, fn){
        var current, next;
        current = target;
        do {
            fn.apply(current, [current]);

            //depth-first traversal pulled from angularjs core
            if (!(next = (current.$$childHead || (current !== target && current.$$nextSibling)))) {
                while(current !== target && !(next = current.$$nextSibling)) {
                    current = current.$parent;
                }
            }
        } while ((current = next));
    }
});

你会这样使用它：

<div shallow-watch="days">
    <div ng-repeat"day in days">
      <label ng-repeat="slot in day.slots">
        <input type="radio" class="{{slot.class}}" value="{{slot.value}}" ng-disabled="{{slot.disabled}}">
      </label>
    </div>
</div>

AngularJS中的“静态”属性

1 个答案: