Question

我试图显示一个用户名列表但当我将鼠标悬停在图标上时，弹出窗口显示为空。

指令

app.directive('dataContent', function(){
  req = [
    users =[
     {username : 'user1'},
     {username : 'user2'}
   ]
  ];
  return {
     restrict: 'E',
     template: '<ul ng-repeat="u in req.users"><li>{{u.username}}</li></ul>'
   } 
});

HTML

<i class="fa fa-thumbs-o-up" popover
               data-toggle="popover"
               data-trigger="hover"
               data-html = 'true'
               data-content="<data-content></data-content>">
</i>

Answer 1

我不喜欢变通方法，但在这种情况下我没有时间，这就完成了我所需要的工作。

我最终做的是：

在我的控制器中有我的ng-repeat列表，而不是我的指令。
重命名我的指令，由于某种原因，dataContent不起作用。所以我们称之为“用户”
有一个包装器初始元素，其id将呈现我的指令，所以只需：
<users id='wrapper-users' style='display:none;'></users>
在我的控制器结束时设置1秒超时，一旦超时，我抓取HTML let grabbedHtml = $('#wrapper-users').html();
一旦超时，用Javascript生成弹出窗口：
$("#element-to-add-popover-to").popover({ html: true, placement: 'bottom', content: grabbedHtml });
最后，删除我的初始包装元素，
$('#wrapper-users').remove();

所以你的指令看起来像这样：

.directive('users', function () {

    return {
        restrict: 'E',
        template: '<ul ng-repeat="u in users"><li>{{u.username}}</li></ul>'
    }
});

你的控制器：

 .controller("myController",
    [
        "$scope", "$timeout", function($scope, $timeout) {

            $scope.users = [
                { username: 'user1' },
                { username: 'user2' }
            ];

            $timeout(function() {
                    var grabbedHtml = $('#wrapper-users').html();


                    $("#myI").popover({
                        html: true,
                        placement: 'bottom', //change to whatever you need
                        trigger: 'hover',
                        content: grabbedHtml
                    });

                    $('#wrapper-users').remove();

                },
                1000);

        }
    ]);

在你的html文件中：

 <div ng-controller="myController as ctrl">

    <users id='wrapper-users' style='display: none;'></users>

    <i class="fa fa-thumbs-o-up" id="myI"></i>
</div>

我希望这会有所帮助。它解决了我和你的问题完全相同的问题，我需要一个角度ng-repeat作为我的bootstrap popover的内容。

Answer 2

我的解决方案是添加一个新指令：

angular.module('Your-Module-Here').directive('popover', function () {
    return function (scope, elem) {
        elem.popover({
            trigger: 'hover'
        });
    }
});

我希望这对你有所帮助。

内部bootstrap popover数据内容中的angular ng-repeat

2 个答案: