From e9900d1636d3365bbb82e43d2cae4b256a7317c2 Mon Sep 17 00:00:00 2001 From: Ibrahim Hd Date: Mon, 5 Dec 2016 09:33:15 +0200 Subject: [PATCH 1/9] Support for template URL attribute: template-url="'myTemplateUrl'" --- angular-bind-html-compile.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index a8473d7..9a306bd 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; + }); + }; + }); } }; }]); From 352f29ce39ee308db167559cb8d55bbfefad6f39 Mon Sep 17 00:00:00 2001 From: Ibrahim Hd Date: Mon, 5 Dec 2016 09:57:10 +0200 Subject: [PATCH 2/9] Update README.md --- README.md | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index f52c38c..2301507 100644 --- a/README.md +++ b/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: ``` -
+
``` -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: ``` -
+
+``` +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 From c8a831b24a4a5d37c160a4df77f938f2db65baa3 Mon Sep 17 00:00:00 2001 From: Ibrahim Hd Date: Mon, 5 Dec 2016 10:16:37 +0200 Subject: [PATCH 3/9] Support for template URL attribute: template-url="'myTemplateUrl'" --- angular-bind-html-compile.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index 9a306bd..0f017b4 100644 --- a/angular-bind-html-compile.js +++ b/angular-bind-html-compile.js @@ -34,11 +34,11 @@ if (attrs.templateUrl) { compileScope = scope.$eval(attrs.templateUrl); } - $compile(tpl)(compileScope) + $compile(tpl)(compileScope); }, function () { - if (scope.$$destroyed) return; + if (scope.$$destroyed) return{}; }); - }; + } }); } }; From f2ae07eb922df0e3d5c1d2c649a4e03a99708c28 Mon Sep 17 00:00:00 2001 From: Ibrahim Hd Date: Mon, 5 Dec 2016 10:21:24 +0200 Subject: [PATCH 4/9] Support for template URL attribute: template-url="'myTemplateUrl'" --- angular-bind-html-compile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index 0f017b4..bff3ea7 100644 --- a/angular-bind-html-compile.js +++ b/angular-bind-html-compile.js @@ -36,7 +36,7 @@ } $compile(tpl)(compileScope); }, function () { - if (scope.$$destroyed) return{}; + if (scope.$$destroyed) {return;} }); } }); From 0f9f2f21b0423cf23052de9e951829b6dfad92b4 Mon Sep 17 00:00:00 2001 From: Ibrahim Hd Date: Mon, 5 Dec 2016 10:35:32 +0200 Subject: [PATCH 5/9] Support for template URL attribute: template-url="'myTemplateUrl'" --- angular-bind-html-compile.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index bff3ea7..efcc20a 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', ['$templateRequest','$compile', function ($templateRequest,$compile) { + module.directive('bindHtmlCompile', ['$templateRequest', '$compile', function ($templateRequest, $compile) { return { restrict: 'A', link: function (scope, element, attrs) { @@ -25,8 +25,8 @@ 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. + // 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); From 4d792fa1d46fdb5274eb7eed20a515e1fd4623c5 Mon Sep 17 00:00:00 2001 From: Ibrahim Hd Date: Mon, 5 Dec 2016 10:39:42 +0200 Subject: [PATCH 6/9] Support for template URL attribute: template-url="'myTemplateUrl'" --- angular-bind-html-compile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index efcc20a..1340f52 100644 --- a/angular-bind-html-compile.js +++ b/angular-bind-html-compile.js @@ -39,7 +39,7 @@ if (scope.$$destroyed) {return;} }); } - }); + }); } }; }]); From ef8bf348105f6dd5fe2fed43297498cde0d71163 Mon Sep 17 00:00:00 2001 From: Ibrahim Hd Date: Mon, 5 Dec 2016 10:43:08 +0200 Subject: [PATCH 7/9] Support for template URL attribute: template-url="'myTemplateUrl'" --- angular-bind-html-compile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index 1340f52..b94098b 100644 --- a/angular-bind-html-compile.js +++ b/angular-bind-html-compile.js @@ -39,7 +39,7 @@ if (scope.$$destroyed) {return;} }); } - }); + }); } }; }]); From 73354b02f4823f40f5dc05ae3b157e66a05b6610 Mon Sep 17 00:00:00 2001 From: Ibrahim Hd Date: Mon, 5 Dec 2016 17:11:54 +0200 Subject: [PATCH 8/9] Removing the word "custom", so it's about directives in general --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2301507..d0ff98d 100644 --- a/README.md +++ b/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 **custom** directives to be compiled. +The `bind-html-compile` directive allows for HTML containing directives to be compiled. You should only use this directive where the content is coming from a trusted source. @@ -21,7 +21,7 @@ Just like the standard `ng-bind-html`, `bind-html-compile` goes like this:
``` -(Unlike the standard `ng-bind-html`, `bind-html-compile` compiles directives, and even those custom ones.) +(However, unlike the standard `ng-bind-html`, `bind-html-compile` compiles directives!) `template-url` attribute can be used to load a template file: ``` From dc4fef15932967e4344f5fdf579ea7ba280d5ead Mon Sep 17 00:00:00 2001 From: Ibrahim Hd Date: Tue, 6 Dec 2016 09:26:05 +0200 Subject: [PATCH 9/9] fixing code style --- angular-bind-html-compile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index b94098b..da65e12 100644 --- a/angular-bind-html-compile.js +++ b/angular-bind-html-compile.js @@ -39,7 +39,7 @@ if (scope.$$destroyed) {return;} }); } - }); + }); } }; }]);