How can I make a click event inside ng-repeat only re-render the affected item (i.e., not run $apply)?

Question

My sample code (down there) raises two issues: the "renderthis" function is called twice per-item when simply loading the page the main issue - when clicking the button I assume that after eval'ing the doit() expression, ng-click calls $apply on the scope, which causes the two DOM elements for each item to be re-rendered.. now, i understand that the scope for each item here is somehow bound to the parent scope or related to it by some weird isolation or transclusion or whatnot which are things i have yet to master.. is there a way to make ng-click only call $digest on the child scope of each item or something of this sort? here is my code: html: ```

{{item.title}} {{renderthis()}} {{item.number}}

``` JS: ``` var app = angular.module('angularjs-starter', []); app.controller('MainCtrl', function($scope) { $…

Accepted Answer

After some ping-pong with @Mark regarding this (see below) it was suggested that I rephrase the question to something of this sort: "How can I make a click event inside an ng-repeat scope only re-render the affected item (i.e., not run $apply) " This is to emphasize, as Mark explained, that it's not so much possible to work around using "ng-click" itself since it issues a hard-coded "$apply" and this runs a digest loop etc.. (see more below)

I will accept my own answer which includes my own version of ng-click that uses $digest instead of $apply and thus does not trigger a re-rendering of all ng-repeat'ed items.

Here is the revised ng-click code (xng-click):

```
var xngEventDirectives = {};

angular.forEach(
  'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup'.split(' '),
  function(name) {
    var directiveName = directiveNormalize('xng-' + name);
    xngEventDirectives[directiveName] = ['$parse', function($parse) {
      return function(scope, element, attr) {

var fn = $parse(attr[directiveName]);
        element.bind(name.toLowerCase(), function(event) {
        fn(scope, {$event:event});
        scope.$digest();
        });
      };
    }];
  }
);
```

And here is a plnkr to demo it:

http://plnkr.co/edit/3i7TCEkBtxCFw2ESeyaU.

How can I make a click event inside ng-repeat only re-render the affected item (i.e., not run $apply)?

Solution

Problem

Related problems