diff --git a/README.md b/README.md index f52c38c..d0ff98d 100644 --- a/README.md +++ b/README.md @@ -16,16 +16,25 @@ Add dependency to your app module * `'angular-bind-html-compile'` ## Usage -`ng-bind-html`: +Just like the standard `ng-bind-html`, `bind-html-compile` goes like this: ``` -
+ ``` -If the `data.content` contained a directive, it would not be compiled. +(However, unlike the standard `ng-bind-html`, `bind-html-compile` compiles directives!) -`bind-html-compile`: +`template-url` attribute can be used to load a template file: ``` - + +``` +or a static path: +``` + +``` + +Also both attributes can be used together for loading a "piece of html code" as well as a "template file": +``` + ``` ## Development diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index a8473d7..da65e12 100644 --- a/angular-bind-html-compile.js +++ b/angular-bind-html-compile.js @@ -3,7 +3,7 @@ var module = angular.module('angular-bind-html-compile', []); - module.directive('bindHtmlCompile', ['$compile', function ($compile) { + module.directive('bindHtmlCompile', ['$templateRequest', '$compile', function ($templateRequest, $compile) { return { restrict: 'A', link: function (scope, element, attrs) { @@ -21,6 +21,25 @@ } $compile(element.contents())(compileScope); }); + scope.$watch(function () { + return scope.$eval(attrs.templateUrl); + }, function (src) { + if (src) { + // set the 2nd param to true to ignore the template request error so that the inner + // contents and scope can be cleaned up. + $templateRequest(src, true).then(function (html) { + var tpl = angular.element(html); + element.append(tpl); + var compileScope = scope; + if (attrs.templateUrl) { + compileScope = scope.$eval(attrs.templateUrl); + } + $compile(tpl)(compileScope); + }, function () { + if (scope.$$destroyed) {return;} + }); + } + }); } }; }]);