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

Question

我已經知道如何處理ng-repeat性能問題（與觀察者）的常見模式，如：one-time-bind,infinite scroll,etc。

但我看到這個answer的人建議轉向指令。

好了，所以我就開始用老式的方法與這個網站

Approach #1's plunker:

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觀察家但現在的按鈕不影響：

問題：

1. 如果我是對的，100個觀察家，因爲通過隔離範圍的直接別名'='。但如果它是該項目的直接別名，爲什麼我沒有看到按鈕點擊後的修改？

2. 如果我想看修改，我是堅持了301觀察家？還有什麼我沒有想到的 - 可以做到嗎？

Answer 1

像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）。如果你可以強制執行這個約定，這個對象是不可變的，那麼這個效果最好，你是單獨工作的，或者團隊（現在和將來）對這個約定有良好的溝通和理解。否則預計會出現惡臭。

Answer 2

這是因爲你用的鏈接，誰編的指令一次性的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>' 
    } 

});