$eval

by yaero

HTML

<div ng-app="demoApp">
  <p style="margin-top: 100px">
    <track-digests></track-digests>
  </p>
  <parent></parent>
</div>

CSS

</style><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script><style>

JavaScript

(function() {
  var a = document.createElement("script");
  a.src = "https://rawgit.com/kentcdodds/ng-stats/master/dist/ng-stats.js";
  a.onload = function() {
    window.showAngularStats()
  };
  document.head.appendChild(a)
})();


(function() {

  'use strict';

  function trackDigests($rootScope) {
    function link($scope, $element, $attrs) {
      var count = 0;

      function countDigests() {
        count++;
        $element[0].innerHTML = '$digests: ' + count;
      }
      $rootScope.$watch(countDigests);
    }
    return {
      link: link
    };
  }

  trackDigests.$inject = ['$rootScope'];

  angular
    .module('voux.trackDigests', [])
    .directive('trackDigests', trackDigests);

})();

var parentComponent = {
  controller: function() {
    var $ctrl = this;

    $ctrl.fields = ['nestedKey', 'nestedKey2'];
    Array.apply(null, {
      length: 10
    }).forEach(() => {
      $ctrl.fields = $ctrl.fields.concat($ctrl.fields);
    });

    $ctrl.api = {
      someKey: 123,
      nestedObject: {
        nestedKey: 'abc',
        nestedKey2: 'abc',
      },
    };

    $ctrl.someMethod = function(event) {
      $ctrl.api = event.message;
    };
  },
  template: `
    	<div>
        <h1>Sample</h1>
        <input ng-model="$ctrl.api.nestedObject.nestedKey">
				<p
					ng-repeat="field in $ctrl.fields track by $index"
				>
					{{field}}: {{ $ctrl.api.nestedObject[field] }}
				</p>
      </div>
    `
};

angular.module('demoApp', ['voux.trackDigests'])
  .component('parent', parentComponent)