Add before and after compile hooks

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`

README.md

@@ -15,7 +15,7 @@ Add dependency to your app module
 
 * `'angular-bind-html-compile'`
 
-## Usage 
+## Usage
 `ng-bind-html`:
 ```
 <div ng-bind-html="data.content"></div>
@@ -28,6 +28,34 @@ If the `data.content` contained a directive, it would not be compiled.
 <div bind-html-compile="data.content"></div>
 ```
 
+Additionally, bind-html-before-compile and/or bind-html-after-compile
+may be specified to execute code before of after the compile.  E.g:
+
+```
+<div bind-html-compile="data.content"
+     bind-html-before-compile="beforeCompile"
+     bind-html-after-compile="afterCompile"></div>
+```
+
+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.

angular-bind-html-compile.js

@@ -6,22 +6,39 @@
     module.directive('bindHtmlCompile', ['$compile', function ($compile) {
         return {
             restrict: 'A',
+            scope: {
+                beforeCompile: '&bindHtmlBeforeCompile',
+                afterCompile: '&bindHtmlAfterCompile'
+            },
             link: function (scope, element, attrs) {
-                scope.$watch(function () {
-                    return scope.$eval(attrs.bindHtmlCompile);
+                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();
+                    if (angular.isFunction(beforeCompile)) {
+                        beforeCompile(element);
+                    }
+
                     // If scope is provided use it, otherwise use parent scope
-                    var compileScope = scope;
+                    var compileScope = scope.$parent;
                     if (attrs.bindHtmlScope) {
-                        compileScope = scope.$eval(attrs.bindHtmlScope);
+                        compileScope = scope.$parent.$eval(attrs.bindHtmlScope);
                     }
                     $compile(element.contents())(compileScope);
+
+                    // After compile hook
+                    var afterCompile = scope.afterCompile();
+                    if (angular.isFunction(afterCompile)) {
+                        afterCompile(element);
+                    }
                 });
             }
-        };
+      };
     }]);
 }(window.angular));

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",