1

ng-repeat で大量の html input[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>

問題は、角度が各入力要素の各属性にウォッチャーを追加し、多くのリソースを消費することです。変化しなければ、属性は変化daysしません。属性を静的にして ng-repeat を使用する方法はありますか? または、他の方法でテンプレートを生成する必要がありますか? その場合、どうすればdays変更しても再レンダリングできますか?

更新: class 属性だけではないことを明確にしました

4

1 に答える 1

0

を使ってみてくださいng-class。

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

ウォッチャーは引き続きバインドされますが、ダイジェストが発生するたびにクラス属性が設定されるわけではなく、値がslot.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>
于 2013-07-11T10:25:19.270 に答える