From e005834bf1e2940e8b67e1aa3fbd8973dcfb9d51 Mon Sep 17 00:00:00 2001 From: Jim LoVerde Date: Thu, 7 Apr 2016 01:38:25 -0500 Subject: [PATCH 1/7] added hooks before and after compilation, e.g. to manipulate the DOM before or after compile --- angular-bind-html-compile.js | 54 +++++++++++++++++++++----------- angular-bind-html-compile.min.js | 2 +- 2 files changed, 36 insertions(+), 20 deletions(-) diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index a8473d7..dfad812 100644 --- a/angular-bind-html-compile.js +++ b/angular-bind-html-compile.js @@ -4,24 +4,40 @@ var module = angular.module('angular-bind-html-compile', []); module.directive('bindHtmlCompile', ['$compile', function ($compile) { - return { - restrict: 'A', - link: function (scope, element, attrs) { - scope.$watch(function () { - return scope.$eval(attrs.bindHtmlCompile); - }, function (value) { - // In case value is a TrustedValueHolderType, sometimes it - // needs to be explicitly called into a string in order to - // get the HTML string. - element.html(value && value.toString()); - // If scope is provided use it, otherwise use parent scope - var compileScope = scope; - if (attrs.bindHtmlScope) { - compileScope = scope.$eval(attrs.bindHtmlScope); - } - $compile(element.contents())(compileScope); - }); - } - }; + return { + restrict: 'A', + scope: { + beforeCompile:'&bindHtmlBeforeCompile', + afterCompile: '&bindHtmlAfterCompile' + }, + link: function (scope, element, attrs) { + console.log("scope", scope) + scope.$parent.$watch(function () { + return scope.$parent.$eval(attrs.bindHtmlCompile); + }, function (value) { + // In case value is a TrustedValueHolderType, sometimes it + // needs to be explicitly called into a string in order to + // get the HTML string. + element.html(value && value.toString()); + + // beforeCompile hook + var beforeCompile = scope.beforeCompile(); + beforeCompile && beforeCompile(element) + + // If scope is provided use it, otherwise use parent scope + var compileScope = scope.$parent; + if (attrs.bindHtmlScope) { + compileScope = scope.$parent.$eval(attrs.bindHtmlScope); + } + + //console.log("compiling...") + $compile(element.contents())(compileScope); + + // After compile hook + var afterCompile = scope.afterCompile(); + afterCompile && afterCompile(element) + }); + } + }; }]); }(window.angular)); diff --git a/angular-bind-html-compile.min.js b/angular-bind-html-compile.min.js index 73a02a6..37b413b 100644 --- a/angular-bind-html-compile.min.js +++ b/angular-bind-html-compile.min.js @@ -1 +1 @@ -!function(a){"use strict";var b=a.module("angular-bind-html-compile",[]);b.directive("bindHtmlCompile",["$compile",function(a){return{restrict:"A",link:function(b,c,d){b.$watch(function(){return b.$eval(d.bindHtmlCompile)},function(e){c.html(e&&e.toString());var f=b;d.bindHtmlScope&&(f=b.$eval(d.bindHtmlScope)),a(c.contents())(f)})}}}])}(window.angular); \ No newline at end of file +!function(a){"use strict";var b=a.module("angular-bind-html-compile",[]);b.directive("bindHtmlCompile",["$compile",function(a){return{restrict:"A",scope:{beforeCompile:"&bindHtmlBeforeCompile",afterCompile:"&bindHtmlAfterCompile"},link:function(b,c,d){console.log("scope",b),b.$parent.$watch(function(){return b.$parent.$eval(d.bindHtmlCompile)},function(e){c.html(e&&e.toString());var f=b.beforeCompile();f&&f(c);var g=b.$parent;d.bindHtmlScope&&(g=b.$parent.$eval(d.bindHtmlScope)),a(c.contents())(g);var h=b.afterCompile();h&&h(c)})}}}])}(window.angular); \ No newline at end of file From b6b145408f75f7d4f867abd92fcbea32939beb9e Mon Sep 17 00:00:00 2001 From: Jim LoVerde Date: Thu, 7 Apr 2016 01:40:18 -0500 Subject: [PATCH 2/7] removed debug log message --- angular-bind-html-compile.js | 1 - angular-bind-html-compile.min.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index dfad812..39d6afc 100644 --- a/angular-bind-html-compile.js +++ b/angular-bind-html-compile.js @@ -11,7 +11,6 @@ afterCompile: '&bindHtmlAfterCompile' }, link: function (scope, element, attrs) { - console.log("scope", scope) scope.$parent.$watch(function () { return scope.$parent.$eval(attrs.bindHtmlCompile); }, function (value) { diff --git a/angular-bind-html-compile.min.js b/angular-bind-html-compile.min.js index 37b413b..993e271 100644 --- a/angular-bind-html-compile.min.js +++ b/angular-bind-html-compile.min.js @@ -1 +1 @@ -!function(a){"use strict";var b=a.module("angular-bind-html-compile",[]);b.directive("bindHtmlCompile",["$compile",function(a){return{restrict:"A",scope:{beforeCompile:"&bindHtmlBeforeCompile",afterCompile:"&bindHtmlAfterCompile"},link:function(b,c,d){console.log("scope",b),b.$parent.$watch(function(){return b.$parent.$eval(d.bindHtmlCompile)},function(e){c.html(e&&e.toString());var f=b.beforeCompile();f&&f(c);var g=b.$parent;d.bindHtmlScope&&(g=b.$parent.$eval(d.bindHtmlScope)),a(c.contents())(g);var h=b.afterCompile();h&&h(c)})}}}])}(window.angular); \ No newline at end of file +!function(a){"use strict";var b=a.module("angular-bind-html-compile",[]);b.directive("bindHtmlCompile",["$compile",function(a){return{restrict:"A",scope:{beforeCompile:"&bindHtmlBeforeCompile",afterCompile:"&bindHtmlAfterCompile"},link:function(b,c,d){b.$parent.$watch(function(){return b.$parent.$eval(d.bindHtmlCompile)},function(e){c.html(e&&e.toString());var f=b.beforeCompile();f&&f(c);var g=b.$parent;d.bindHtmlScope&&(g=b.$parent.$eval(d.bindHtmlScope)),a(c.contents())(g);var h=b.afterCompile();h&&h(c)})}}}])}(window.angular); \ No newline at end of file From 1f4e1914c25ea21dca5d141ea66cc14671d0415a Mon Sep 17 00:00:00 2001 From: Jim LoVerde Date: Thu, 7 Apr 2016 01:40:51 -0500 Subject: [PATCH 3/7] removed extra newline --- angular-bind-html-compile.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index 39d6afc..36be389 100644 --- a/angular-bind-html-compile.js +++ b/angular-bind-html-compile.js @@ -28,8 +28,6 @@ if (attrs.bindHtmlScope) { compileScope = scope.$parent.$eval(attrs.bindHtmlScope); } - - //console.log("compiling...") $compile(element.contents())(compileScope); // After compile hook From 1c638987cdf79f5c88c27c30c30ff6701d24d140 Mon Sep 17 00:00:00 2001 From: Jim LoVerde Date: Thu, 7 Apr 2016 11:46:55 -0500 Subject: [PATCH 4/7] fixing linter issues --- angular-bind-html-compile.js | 60 +++++++++++++++++--------------- angular-bind-html-compile.min.js | 2 +- 2 files changed, 33 insertions(+), 29 deletions(-) diff --git a/angular-bind-html-compile.js b/angular-bind-html-compile.js index 36be389..361f4a1 100644 --- a/angular-bind-html-compile.js +++ b/angular-bind-html-compile.js @@ -4,37 +4,41 @@ var module = angular.module('angular-bind-html-compile', []); module.directive('bindHtmlCompile', ['$compile', function ($compile) { - return { - restrict: 'A', - scope: { - beforeCompile:'&bindHtmlBeforeCompile', - afterCompile: '&bindHtmlAfterCompile' - }, - link: function (scope, element, attrs) { - scope.$parent.$watch(function () { - return scope.$parent.$eval(attrs.bindHtmlCompile); - }, function (value) { - // In case value is a TrustedValueHolderType, sometimes it - // needs to be explicitly called into a string in order to - // get the HTML string. - element.html(value && value.toString()); + return { + restrict: 'A', + scope: { + beforeCompile: '&bindHtmlBeforeCompile', + afterCompile: '&bindHtmlAfterCompile' + }, + link: function (scope, element, attrs) { + scope.$parent.$watch(function () { + return scope.$parent.$eval(attrs.bindHtmlCompile); + }, function (value) { + // In case value is a TrustedValueHolderType, sometimes it + // needs to be explicitly called into a string in order to + // get the HTML string. + element.html(value && value.toString()); - // beforeCompile hook - var beforeCompile = scope.beforeCompile(); - beforeCompile && beforeCompile(element) + // beforeCompile hook + var beforeCompile = scope.beforeCompile(); + if (angular.isFunction(beforeCompile)) { + beforeCompile(element); + } - // If scope is provided use it, otherwise use parent scope - var compileScope = scope.$parent; - if (attrs.bindHtmlScope) { - compileScope = scope.$parent.$eval(attrs.bindHtmlScope); - } - $compile(element.contents())(compileScope); + // If scope is provided use it, otherwise use parent scope + var compileScope = scope.$parent; + if (attrs.bindHtmlScope) { + compileScope = scope.$parent.$eval(attrs.bindHtmlScope); + } + $compile(element.contents())(compileScope); - // After compile hook - var afterCompile = scope.afterCompile(); - afterCompile && afterCompile(element) - }); - } + // After compile hook + var afterCompile = scope.afterCompile(); + if (angular.isFunction(afterCompile)) { + afterCompile(element); + } + }); + } }; }]); }(window.angular)); diff --git a/angular-bind-html-compile.min.js b/angular-bind-html-compile.min.js index 993e271..42dc5a0 100644 --- a/angular-bind-html-compile.min.js +++ b/angular-bind-html-compile.min.js @@ -1 +1 @@ -!function(a){"use strict";var b=a.module("angular-bind-html-compile",[]);b.directive("bindHtmlCompile",["$compile",function(a){return{restrict:"A",scope:{beforeCompile:"&bindHtmlBeforeCompile",afterCompile:"&bindHtmlAfterCompile"},link:function(b,c,d){b.$parent.$watch(function(){return b.$parent.$eval(d.bindHtmlCompile)},function(e){c.html(e&&e.toString());var f=b.beforeCompile();f&&f(c);var g=b.$parent;d.bindHtmlScope&&(g=b.$parent.$eval(d.bindHtmlScope)),a(c.contents())(g);var h=b.afterCompile();h&&h(c)})}}}])}(window.angular); \ No newline at end of file +!function(a){"use strict";var b=a.module("angular-bind-html-compile",[]);b.directive("bindHtmlCompile",["$compile",function(b){return{restrict:"A",scope:{beforeCompile:"&bindHtmlBeforeCompile",afterCompile:"&bindHtmlAfterCompile"},link:function(c,d,e){c.$parent.$watch(function(){return c.$parent.$eval(e.bindHtmlCompile)},function(f){d.html(f&&f.toString());var g=c.beforeCompile();a.isFunction(g)&&g(d);var h=c.$parent;e.bindHtmlScope&&(h=c.$parent.$eval(e.bindHtmlScope)),b(d.contents())(h);var i=c.afterCompile();a.isFunction(i)&&i(d)})}}}])}(window.angular); \ No newline at end of file From fdead63d14e89af57455a406c03399468cdedfa7 Mon Sep 17 00:00:00 2001 From: Jim LoVerde Date: Thu, 7 Apr 2016 14:45:48 -0500 Subject: [PATCH 5/7] updating docs --- CHANGELOG.md | 4 ++++ README.md | 29 ++++++++++++++++++++++++++++- package.json | 2 +- 3 files changed, 33 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e8bcf61..2d9b364 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +### 1.3.0 + +* Added hooks before and after compile + ### 1.2.1 * Change strict angular dependency to `~1.x` diff --git a/README.md b/README.md index f52c38c..6b03a0a 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Add dependency to your app module * `'angular-bind-html-compile'` -## Usage +## Usage `ng-bind-html`: ```
@@ -28,6 +28,33 @@ If the `data.content` contained a directive, it would not be compiled.
``` +Additionally, bind-html-before-compile and/or bindHtmlAfterCompile +may be specified to execute code before of after the compile. E.g: + +``` +
+``` + +And in your controller code: +``` +... + function beforeCompile(element) { + // do something, e.g add angular attributes and directives to + // the HTML that was bound before it gets compiled + angular.element("input[name=someField]").attr("ng-model", "data.someField"); + } + function afterCompile(element) { + // do something, e.g. toggle visibility back on if you had + // hidden the div while changing the HTML content + } +``` + +Example Plunkers: + +* [Example of before and after compile hooks](http://plnkr.co/edit/f4LobH?p=preview) + ## Development * Contributions welcome - Create an issue to discuss proposed changes and additions * All contributions should be done in branches and submitted as pull requests. diff --git a/package.json b/package.json index f8f9230..67ce136 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-bind-html-compile", - "version": "1.2.1", + "version": "1.3.0", "dependencies": {}, "devDependencies": { "grunt": "~0.4.1", From fcb2499538390ca1e14eb13ad056048eb48b7f27 Mon Sep 17 00:00:00 2001 From: Jim LoVerde Date: Thu, 7 Apr 2016 14:47:01 -0500 Subject: [PATCH 6/7] Bump to [1.3.0] --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 6b03a0a..d28c277 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,7 @@ Example Plunkers: * [Example of before and after compile hooks](http://plnkr.co/edit/f4LobH?p=preview) + ## Development * Contributions welcome - Create an issue to discuss proposed changes and additions * All contributions should be done in branches and submitted as pull requests. From 4a58237c15813e3d740243c7a36764776368673a Mon Sep 17 00:00:00 2001 From: Jim LoVerde Date: Thu, 7 Apr 2016 15:05:40 -0500 Subject: [PATCH 7/7] fixed README typo --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d28c277..79ee534 100644 --- a/README.md +++ b/README.md @@ -28,13 +28,13 @@ If the `data.content` contained a directive, it would not be compiled.
``` -Additionally, bind-html-before-compile and/or bindHtmlAfterCompile +Additionally, bind-html-before-compile and/or bind-html-after-compile may be specified to execute code before of after the compile. E.g: ```
+ bind-html-after-compile="afterCompile"> ``` And in your controller code: