Question

这是this post的后续问题。

我在使用ng-attr-title注入的html中使用的ng-bind-html无法正常运行ie）标题未在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模板。

Answer 2

我发现其他答案存在问题，并且以下指令有效，可以与bower一起安装。

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

Answer 3

ng-bind-html会将html注入字符串。它不会编译它。

检查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}}';
  }]);

你需要自定义指令来编译你的html并将它注入你的元素。

使用以下指令

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);
            });
        }
    };
}]);

Answer 4

这是ng-bind-html的正常行为。通常，控制器的代码不应具有HTML标记 - 将其移至模板并使用ng-show / ng-hide控制其可见性。

但是，如果你愿意，你仍然可以这样做，只需使用$ compile服务。请参见此处的示例：https://docs.angularjs.org/api/ng/service/ $ compile

ng-bind-html中的angular指令没有被发现

4 个答案: