Support for template url

README.md

@@ -1,7 +1,7 @@
 # angular-bind-html-compile
 This repo contains a bower package that provides an angular directive which can be passed trusted html with angular template content to evaluate.
 
-The `bind-html-compile` directive allows for HTML containing directives to be compiled.
+The `bind-html-compile` directive allows for HTML containing **custom** directives to be compiled.
 
 You should only use this directive where the content is coming from a trusted
 source.
@@ -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:
 ```
-<div ng-bind-html="data.content"></div>
+<div bind-html-compile="data.content"></div>
 ```
 
-If the `data.content` contained a directive, it would not be compiled.
+(Unlike the standard `ng-bind-html`, `bind-html-compile` compiles directives, and even those custom ones.)
 
-`bind-html-compile`:
+`template-url` attribute can be used to load a template file:
 ```
-<div bind-html-compile="data.content"></div>
+<div bind-html-compile template-url="data.templateUrl"></div>
+```
+or a static path:
+```
+<div bind-html-compile template-url="'partials/myTemplate.html'"></div>
+```
+
+Also both attributes can be used together for loading a "piece of html code" as well as a "template file":
+```
+<div bind-html-compile="data.content" template-url="data.templateUrl"></div>
 ```
 
 ## Development

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;}
+                            });
+                        }
+                 });
             }
         };
     }]);