Saving watchers in angular? (ng-repeat pov)

Question

I already know the general patterns of how to deal with performance problems ng-repeat (with observers), for example: one-time-bind, infinite scroll, etc.

But I saw this answer from a guy who suggested switching to a directive.

Ok, so I started with a simple approach a simple approach

Approach No. 1 Plunker:

100 elements with this html:

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

This will give 301observers, and I can change the elements 5'thwhen I click the button:

So, I thought about moving it to a directive (for example, the guy suggested):

Approaches # 2 plunker

Now 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)
  }
});

Now I go down to 101observers, but now the button does not affect:

Questions:

• , 100 '='. , ?

• , 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 scope , ).

, 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"
    };
};

( , true scope.$watch). , , (Immutable.js -?), ( ) . , .

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>'
   }

});