$eval

by yaero

HTML

<div ng-app="demoApp">
   <parent></parent>
   <track-digests></track-digests>
</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']

    $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"
				>
					{{field}}: {{ $ctrl.api.nestedObject[field]) }}
				</p>
      </div>
    `
};

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