Question

我尝试在里面使用angularjs模板实现工具提示。为此，我使用“uib-tooltip-html”并在元素上添加一个属性来编译模板。但它不起作用。这是代码这是掠夺者 http://plnkr.co/edit/y1TvogsFFBoBVra3gO3F?p=preview

   <html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>uib-tooltip-html test</title>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-sanitize.min.js"></script>
    <script>
        var app = angular.module("test", ['ngSanitize','ui.bootstrap']).config(function($sceProvider) {
            $sceProvider.enabled(false);
        });

        app.controller("testController", function($scope, $http, $interval, $sce) {
          $scope.text = $sce.trustAsHtml('<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>');
        });
        app.directive('compileTemplate', function($compile, $parse){
    return {
        link: function(scope, element, attr){
            var parsed = $parse(attr.uibTooltipHtml);
            console.log(attr.uibTooltipHtml);

            function getStringValue() { return (parsed(scope) || '').toString(); }
            console.log(getStringValue())
            //Recompile if the template changes
            scope.$watch(getStringValue, function() {
              console.log('ca passe');
                $compile(element, null, -9999)(scope);  //The -9999 makes it skip directives so that we do not recompile ourselves
            });
        }         
    }
});
    </script>

    </head>
<body>

<div ng-app="test" ng-controller="testController">

    <p style="margin-top: 5em;" uib-tooltip="Some text" >
        A Thing With a Tooltip
    </p>

    <p style="margin-top: 5em;" uib-tooltip-html="text" compile-template>
        A Thing With an HTML Tooltip
    </p>

</div>

提前感谢您的回答

Answer 1

您可以像这样使用uib-tooltip-template：

<p style="margin-top: 5em;" uib-tooltip-template="'myTooltipTemplate.html'">
    A Thing With an HTML Tooltip
</p>

然后将你的html放入myTooltipTemplate.html：

<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>

模板放在一个单独的文件中。

文档：https://angular-ui.github.io/bootstrap/#/tooltip

plnkr：http://plnkr.co/edit/tiCHpd0LipixXbO4Xfa5?p=preview

angularjs中的工具提示“uib-tooltip-html”

1 个答案: