ng-bind-html中的angular指令未公开 [英] angular directives inside ng-bind-html is not evluated

问题描述

这是此帖子的后续问题.

我在使用ng-bind-html注入的html中使用了ng-attr-title，这是行不通的，即，标题未在DOM元素中形成，因此在悬停时未形成tooltip.这是我的代码

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

Jsfiddle

推荐答案

您必须使用$compile服务来实现此目的.

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>

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

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

这篇关于ng-bind-html中的angular指令未公开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！