Geek Answers Handbook

Ng-bind-html with UI Bootstrap instructions

I do not think that this is directly a problem, but I do not know how to do it. I am trying to dynamically load content that uses the Bootstrap UI directives, but the Bootsrap UI components do not work when loading the content. More specific, tooltips do not work. Here is the important code:

<div ng-bind-html="trustSnippet(f.field.contentAfter)"></div>

javascript

$scope.trustSnippet = function(snippet) {
          return $sce.trustAsHtml(snippet);
};

HTML I'm trying to enter:

<i class="fa fa-exclamation-circle" tooltip-placement="right" tooltip="On the Right!"></i>

Any clues?

Ty

+4
source share
2 answers

, ng-bind-html , UI Bootstrap - , , .

HTML , ng-include.

:

<div ng-include="'path/to/html'"></div>

, , : $scope.path = "path/to/html";:

<div ng-include="path"></div>

, HTML / Angular ( , , , - ), $compile, :

app.directive("ngBindHtmlCompile", function($compile, $sce){
  return {
    restrict: "A",
    link: function(scope, element, attrs){
      scope.$watch($sce.parseAsHtml(attrs.ngBindHtmlCompile), function(html){
        var el = angular.element("<div>").html(html);
        element.empty();
        element.append(el.children());
        $compile(element.contents())(scope);
      })
    }
  };
});

"ngSanitize" . :

<div ng-bind-html-compile="html"></div>
+3

. .

HTML,

<div ng-bind-html="f.field.contentAfter | unsafe"></div>

Javascript

app.filter('unsafe', function($sce) {
  return function(val) {
      return $sce.trustAsHtml(val);
  }; 
});
+1

More articles:


All Articles