Angular Function binding

by mslocum

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.js"></script>
<div ng-controller='test'>
  <button ng-click="testDigest()">
  Test digest
  </button>
  <my-dir 
    ng-repeat="i in count track by $index"
    pos="{{$index}}" 
  ></my-dir>
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('test', function($scope) {
	$scope.count = new Array(10000);
  
	$scope.testDigest = function() {
  	setTimeout(function() {
    	var startTime = performance.now();
      $scope.$digest();
      var duration = performance.now() - startTime;
      alert("Digest Duration: " + duration);
    }, 0);
  }
});


app.directive('myDir', function() {
	return {
  	template: '<div>{{ getIndex() }}</div>',
    link: function(scope, element, attrs) {
    	scope.getIndex = function() {
      	return attrs.pos;
      }
    }
  }
});