在自舉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內容

回答

相關問題