保存观察角？（ng-repeat POV）

问题描述：

我已经知道如何处理ng-repeat性能问题（与观察者）的常见模式，如：one-time-bind,infinite scroll,etc。保存观察角？（ng-repeat POV）

但我看到这个answer的人建议转向指令。

好了，所以我就开始用老式的方法与这个网站

100项简单的方法：

<div ng-repeat="e in ct.arr"> 
     <div class='s'> 
     <span >name:{{e.name}} , age:{{e.age}} , height:{{e.height}}</span> 
     <hr> 
    </div>

这将产生301观察者，我可以改变5'th物品当我点击一个按钮时：

于是我想到了移动它指令（喜欢的男生建议）：

Approaches #2's plunker

现在的HTML是：

<div ng-repeat="e in ct.arr"> 
    <div class='s'> 
     <span my-event="e" ></span> 
     <hr> 
    </div> 
    </div>

指令：

.directive('myEvent', function() { 
    return { 
    scope: { 
     event: "=myEvent" 
    }, 
    link: link, 
    } 

    function link(scope, element, attrs) { 
    var ev = scope.event; 
    element.text('name:'+ev.name +', age:'+ev.age+' , height:'+ev.height) 
    } 
});

现在我想下去101观察家但现在的按钮不影响：

问题：

如果我是对的，100个观察家，因为通过隔离范围的直接别名'='。但如果它是该项目的直接别名，为什么我没有看到按钮点击后的修改？
如果我想看修改，我是坚持了301观察家？还有什么我没有想到的 - 可以做到吗？

答

像Alainlb写道，你只计算内容一次在创作时。当然，就像你在评论中写的一样，使用template :'<span>name:{{event.name}} ,age:{{event.age}} , height:{{event.height}} </span>'增加手表（每个{{ ... }}是幕后的手表）。

想到的第一个解决方案是使用监视指令的项目。深手表具体而言，使得它能够检测更改对象的属性，不仅改变到实际的对象引用：

function link(scope, element, attrs) { 
    scope.$watch('event', function(ev) { 
     element.text('name:' + ev.name + ', age:' + ev.age + ' , height:' + ev.height); 
    }, true); 
}

http://plnkr.co/edit/marpxMx5qin7mOlFwp3X?p=preview

分数：201个手表

但我们可以做得更好;由于我们正在手动查看，因此=作用域绑定现在是多余的。哦，然后scope: {}配置是空的;我们甚至可以没有范围，既不是孤立的，也不是新的原型继承。我们使用scope: false（它每次迭代节省1个范围对象，对于许多迭代来说是一个很好的增益）。

我们现在直接观看在my-event属性中的表达式：

.directive('myEvent', function() { 
    return { 
     scope: false, 
     link: link, 
    }; 

    function link(scope, element, attrs) { 
     scope.$watch(
      attrs.myEvent, 
      function(ev) { 
       element.text('name:' + ev.name + ', age:' + ev.age + ' , height:' + ev.height); 
      }, 
      true 
     ); 
    } 
});

http://plnkr.co/edit/lvnIQCJMnniFlOeRseaZ?p=preview

分数：101个手表

有一个问题：深度观望产生较少的手表，但它们更多因为它们迭代观看对象的每个属性，所以价格便宜。所以真正的性能增益可能会比看起来少--101手表和301手表。我们可以做得更好吗？

甚至在尝试之前，我会先测量101个深手表和301个简单手表之间的真实性能差异。如果可以忽略不计，我们就可以。否则，我们可能能够在使用Javascript属性获取器和设置器的更新中变得更“聪明”，也许可以手动设置对象上的脏标志。这将是复杂的。

更好的方法是永远不要改变对象的内部属性（把它当作不可变的 - 一般来说是个好主意）并改变引用本身。即更多信息：

vm.c10 = function(){ 
    this.arr[4] = { 
     name: "aaaa", 
     age: "aaaa", 
     height: "aaaa" 
    }; 
};

然后你再也不用为深手表（除去从scope.$watch参数的, true）。如果你可以强制执行这个约定，这个对象是不可变的，那么这个效果最好，你是单独工作的，或者团队（现在和将来）对这个约定有良好的沟通和理解。否则预计会出现恶臭。

答

这是因为你用的链接，谁编的指令一次性的HTML并显示它

试试这个http://plnkr.co/edit/spYF935i5TIX9HApVTF4?p=preview

.directive('myEvent', function() { 
    return { 
    scope: { 
     event: "=myEvent" 
    } 
    , template :'<span>name:{{event.name}} ,age:{{event.age}} , height:{{event.height}} </span>' 
    } 

});

这是** 401 **观察者... –

保存观察角？ （ng-repeat POV）

相关推荐

保存观察角？（ng-repeat POV）