├── .gitignore ├── src └── ngHtmlCompile.js ├── example ├── libs │ └── ngHtmlCompile.js ├── script.js └── index.html ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | *pyc 2 | *~ 3 | *.log 4 | *.coverage 5 | *.sqlite 6 | 7 | bin/ 8 | include/ 9 | lib/ 10 | .ropeproject/ 11 | */htmlcov/ 12 | *.egg-info/ 13 | */migrations/ 14 | */static_prod/ -------------------------------------------------------------------------------- /src/ngHtmlCompile.js: -------------------------------------------------------------------------------- 1 | angular.module('ngHtmlCompile', []). 2 | directive('ngHtmlCompile', function($compile) { 3 | return { 4 | restrict: 'A', 5 | link: function(scope, element, attrs) { 6 | scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue) { 7 | element.html(newValue); 8 | $compile(element.contents())(scope); 9 | }); 10 | } 11 | } 12 | }); 13 | -------------------------------------------------------------------------------- /example/libs/ngHtmlCompile.js: -------------------------------------------------------------------------------- 1 | angular.module('ngHtmlCompile', []). 2 | directive('ngHtmlCompile', function($compile) { 3 | return { 4 | restrict: 'A', 5 | link: function(scope, element, attrs) { 6 | scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue) { 7 | element.html(newValue); 8 | $compile(element.contents())(scope); 9 | }); 10 | } 11 | } 12 | }); 13 | -------------------------------------------------------------------------------- /example/script.js: -------------------------------------------------------------------------------- 1 | var myApp = angular.module('MyApp', ['ngHtmlCompile']); 2 | 3 | function HomeCtrl($scope, $compile) { 4 | 5 | $scope.firstName = 'Bruce'; 6 | $scope.lastName = 'Willis'; 7 | 8 | $scope.template = 'First name : '; 9 | 10 | $scope.change = function() { 11 | $scope.template = 'Last Name : '; 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 |

{{firstName}}
{{lastName}}

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013, Francis Bouvier - Xerus Technologies. 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | 1. Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | 2. Redistributions in binary form must reproduce the above copyright 11 | notice, this list of conditions and the following disclaimer in the 12 | documentation and/or other materials provided with the distribution. 13 | 14 | 3. Neither the name of Xerus Technologies nor the names of its contributors 15 | may be used to endorse or promote products derived from this software 16 | without specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NgHtmlCompile 2 | 3 | *ng-html-compile* is a simple directive for *Angualr JS* to bind and compile an Html fragment. 4 | 5 | ## Getting started 6 | 7 | In your *index.html*: 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 |

15 |

16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ``` 25 | 26 | In your *script.js*: 27 | 28 | ```javascript 29 | var myApp = angular.module('MyApp', ['ngHtmlCompile']); 30 | 31 | function HomeCtrl($scope) { 32 | $scope.name = 'Camaron de la Isla'; 33 | $scope.htmlTemplate = 'Name '; 34 | }; 35 | ``` 36 | 37 | **Child scope** 38 | 39 | If you use *ng-html-compile* inside a directive that create a child scope (like *ng-repeat*), be carrefull to use an object to define your model. 40 | Otherwise the binding will be created with a new property created inside the child scope. 41 | 42 | *index.html* 43 | ```html 44 | 45 | 46 | 47 | 48 |

49 | 50 |

51 | 52 |

53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | ``` 62 | 63 | *script.js* 64 | ```javascript 65 | var myApp = angular.module('MyApp', ['ngHtmlCompile']); 66 | 67 | function HomeCtrl($scope) { 68 | $scope.author = { 69 | name: 'Camaron de la Isla' 70 | }; 71 | $scope.htmlTemplates = ['Name ']; 72 | }; 73 | ``` 74 | --------------------------------------------------------------------------------