call function inside $sce.trustAsHtml() string in Angular js

by

It’s a bit tricky because ng-bind-html will simply insert plain old html and not bother compiling it (so any directives in the html will not be processed by angular.

The trick is finding a way to compile whenever the template changes. For example, you could create a directive that does this. It would look something like:

.directive('compileTemplate', function($compile, $parse){
    return {
        link: function(scope, element, attr){
            var parsed = $parse(attr.ngBindHtml);
            function getStringValue() { return (parsed(scope) || '').toString(); }

            //Recompile if the template changes
            scope.$watch(getStringValue, function() {
                $compile(element, null, -9999)(scope);  //The -9999 makes it skip directives so that we do not recompile ourselves
            });
        }         
    }
});

You can then use it like this:

<p ng-bind-html="myHTML" compile-template></p>

See the working example here:

http://jsfiddle.net/3J25M/2/

More Related Contents:

  1. Working with select using AngularJS’s ng-options
  2. Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
  3. Why Does Firebase Lose Reference outside the once() Function?
  4. How to set an iframe src attribute from a variable in AngularJS
  5. AngularJS 1.2 $injector:modulerr
  6. AngularJS – Value attribute on an input text box is ignored when there is a ng-model used?
  7. AngularJS communication between directives
  8. ion-content and ion-footer have different $scope
  9. AngularJS – Building a dynamic table based on a json
  10. Reading Excel file using node.js
  11. download csv file from web api in angular js
  12. What is the purpose of square bracket usage in Angular?
  13. Change format of md-datepicker in Angular Material with momentjs
  14. Angularjs $http post file and form data
  15. Resetting form after submit in Angularjs
  16. ES6 Promise not Updating AngularJS DOM [duplicate]
  17. Does Angular routing template url support *.cshtml files in ASP.Net MVC 5 Project?
  18. Angular 1 – get current URL parameters
  19. AngularJS : ng-model binding not updating when changed with jQuery
  20. In AngularJS, any inline javascript code that included in HTML templates doesn’t work
  21. Remove ‘All Files’ option from HTML file input
  22. ng-click not working in dynamically created content
  23. How to implement hierarchical multilevel datatable in javaScript?
  24. What is the difference between Polymer elements and AngularJS directives?
  25. Show pop-ups the most elegant way
  26. $resource callback (error and success)
  27. AngularJS: lazy loading controllers and content
  28. Rename Object Key in an array using javascript
  29. Function Called Multiple Times in AngularJS Repeat Section
  30. Load static JSON file in Webpack

Leave a Comment