angular directives inside ng-bind-html is not evluated

问题

This is a subsequent question to this post .

I have an ng-attr-title used in the html injected using ng-bind-html which is not working ie) the title is not formed in the DOM element hence on hovering the tooltip is not formed.here is my code

myApp.controller("MyCtrl",function($scope) {
$scope.tl="this is title";
$scope.level = "<span ng-attr-title='{{tl}}'><b>data</b></span>";
});

Problem is illustrated in the Jsfiddle

回答1:

You have to use $compile service to achieve this.

JS:

var myApp = angular.module('myApp', ['ngSanitize']); 

myApp.controller("MyCtrl", function($scope){
    $scope.tl="this is title";
    $scope.level = "<span ng-attr-title='{{tl}}'><b>data</b></span>"; 
});

myApp.directive('compileHtml', compileHtml);

function compileHtml($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return scope.$eval(attrs.compileHtml);
            }, function (value) {
                element.html(value);
                $compile(element.contents())(scope);
            });
        }
    };
}

HTML:

<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
  <span compile-html="level" ></span>
</div>

This compileHtml directive will compile your HTML template against your $scope.

回答2:

I found that the other answers have problems and that the following directive works, and can be installed with bower.

https://github.com/incuna/angular-bind-html-compile

回答3:

ng-bind-html will inject html as string. It will not compile it.

check http://plnkr.co/edit/M80zp3o4FIODIXFWVAuM?p=preview

angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.val = 'patel';
    $scope.myHTML =
       'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em> {{val}}';
  }]);

You need custom directive which compiles your html and injects it into your element.

Use following directive

module.directive('bindHtmlCompile', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return scope.$eval(attrs.bindHtmlCompile);
            }, function (value) {
                element.html(value);
                $compile(element.contents())(scope);
            });
        }
    };
}]);

回答4:

This is a normal behaviour of ng-bind-html. Generally, the controller's code should not have HTML markup - move it to template and controls it's visibility with ng-show/ng-hide instead.

However, you still can do that if you want, just use $compile service. See example here: https://docs.angularjs.org/api/ng/service/$compile

来源：https://stackoverflow.com/questions/31722343/angular-directives-inside-ng-bind-html-is-not-evluated

标签

angularjs

ng-bind-html