Directive watch and compile Example

by John Harley

HTML

<div ng-app="mycompile">
  <div ng-controller="Ctrl">
    <input ng-model="name"> <br>
    <textarea ng-model="html"></textarea> <br>
    <div compile="html"></div>
  </div>
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<style>

JavaScript

angular.module('mycompile', [], function($compileProvider) {
  // configure new 'compile' directive by passing a directive
  // factory function. The factory function injects the '$compile'
  $compileProvider.directive('compile', function($compile) {
    // directive factory creates a link function
    return function(scope, element, attrs) {
      scope.$watch(
        function(scope) {
           // watch the 'compile' expression for changes
            console.log('ngModel ' + attrs.compile + ' is ' + scope.$eval(attrs.compile));
           return scope.$eval(attrs.compile);
        },
        function(value) {
          // when the 'compile' expression changes
          // assign it into the current DOM
            element.html(value);
            console.log('value is ' + value);
       
          // compile the new DOM and link it to the current
          // scope.
          // NOTE: we only compile .childNodes so that
          // we don't get infinite loop compiling ourselves
          $compile(element.contents())(scope);
        }
      );
    };
  })
});

function Ctrl($scope) {
  $scope.name = 'Angular';
  $scope.html = 'Hello {{name}}';
}