在ng-repeat中没有为div显示AngularUI的工具提示

时间:2016-10-31 08:47:00

标签: javascript html angularjs angular-ui-bootstrap angular-ui

我试图使用AngularUI在网站的某些div上显示工具提示。目标是在用户进入网站时显示它们。这就是tooltop-is-open设置为true的原因。但是,这不适用于重复组中的元素(即通过ng-repeat创建的div)。我错过了什么?

这是HTML:



<script >
angular.module('testApp', ['ui.bootstrap']);

angular.module('testApp')
.controller('testController', ['$scope', function($scope) {

    $scope.demo = [1, 2, 3, 4, 5, 6];

}]);
</script>
&#13;
<!DOCTYPE html>
<html lang="en" ng-app="testApp">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>

        <script src="bower_components/angular/angular.min.js"></script>
        <script src="bower_components/angular-animate/angular-animate.min.js"></script>
        <script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
        <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
        <link rel="stylesheet" href="bower_components/bootstrap-css-only/css/bootstrap.min.css"/>
        <script src="index.js"></script>

    </head>
    <body ng-controller="testController" >

        <!-- works -->
        <div >
            <h1 uib-tooltip="hallo" 
             tooltip-is-open="true" 
             tooltip-placement="bottom">Title</h1>
        </div>

        <!-- does not work -->        
        <div ng-repeat="a in demo">
            <h2 uib-tooltip="hallo"
                 tooltip-is-open="true" 
                 tooltip-placement="bottom">{{ a }}</h2>
        </div>

    </body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

在ngRepeat中使用uib-tooltip-html代替:

<div ng-repeat="a in demo">
    <h2 uib-tooltip-html="'hallo'" tooltip-is-open="true" tooltip-placement="bottom">
        {{ a }}
    </h2>
</div>

看起来像个错误