| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Example - example-example4-jquery</title> |
| |
| |
| <script src="../../components/jquery-1.10.2/jquery.js"></script> |
| <script src="../../../angular.js"></script> |
| |
| |
| |
| </head> |
| <body ng-app="compile"> |
| <script> |
| angular.module('compile', [], 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 |
| return scope.$eval(attrs.compile); |
| }, |
| function(value) { |
| // when the 'compile' expression changes |
| // assign it into the current DOM |
| element.html(value); |
| |
| // compile the new DOM and link it to the current |
| // scope. |
| // NOTE: we only compile .childNodes so that |
| // we don't get into infinite loop compiling ourselves |
| $compile(element.contents())(scope); |
| } |
| ); |
| }; |
| }) |
| }); |
| |
| function Ctrl($scope) { |
| $scope.name = 'Angular'; |
| $scope.html = 'Hello {{name}}'; |
| } |
| </script> |
| <div ng-controller="Ctrl"> |
| <input ng-model="name"> <br> |
| <textarea ng-model="html"></textarea> <br> |
| <div compile="html"></div> |
| </div> |
| </body> |
| </html> |
