angularjs - ng-bind-html 中的 Angular 指令未被评估

Question

这是 this post 的后续问题.

我在使用 ng-bind-html 注入(inject)的 html 中使用了一个 ng-attr-title，它不起作用，即)标题未在 DOM 中形成因此悬停在 tooltip 上的元素未形成。这是我的代码

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

问题在 Jsfiddle 中说明。

Answer 1

您必须使用 $compile 服务来实现这一点。

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>

此 compileHtml 指令将针对您的 $scope 编译您的 HTML 模板。