在自举popover数据内的角ng-repeat内容

我试图显示用户名列表，但当我将图标悬停时，弹出窗口显示为空。在自举popover数据内的角ng-repeat内容

指令

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>

来源

2017-06-06 FebMosm

我不喜欢的解决方法，但在这种情况下，我没有足够的时间，这完成我所需要的。

我最终什么事做的是：

具有列表我的控制器内我的NG-重复，而不是在我的指令。
重命名我的指令，由于某些原因dataContent无法正常工作。因此，让我们把它称为“用户”
有一个id的包装初始元素会使我的指令，所以才：
<users id='wrapper-users' style='display:none;'></users>
我控制器年底设定的1秒超时，一旦timesout，我抢HTML
let grabbedHtml = $('#wrapper-users').html();
而且一旦timesout，生成的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的内容。

来源

2017-07-18 20:00:40

我的解决办法是增加一个新的指令：

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

我希望这可以帮助您。

来源

2018-01-22 22:45:21

在自举popover数据内的角ng-repeat内容

回答

相关问题