Angular UI Bootstrap：动态弹出窗口模板ID

Question

是否可以使用带有动态ID的模板进行Angular UI Popover？

例如：

<div ng-repeat="row in data"> 
    <button class="btn" uib-popover-template="'myTemplate_{{row.id}}.html'" popover-trigger="mouseenter">View</button> 
    <script type="text/ng-template" id="myTemplate_{{row.id}}.html"> 
     <strong>Name</strong>: {{row.name}}<br/> 
     <strong>Phone</strong>: {{row.phone}}<br/> 
     <strong>Email</strong>: {{row.email}} 
    </script> 
</div> 

当我鼠标悬停按钮角试图从服务器获取的，而不是使用纳克模板模板（例如myTemplate_1.html）。

我接近这个权利吗？如果没有，将动态html内容分配给popovers的最佳方式是什么？

谢谢。

Answer 1

标识需要唯一，任何通过uib-popover-template传递的数据都将被解析。 id=myTemplate_{{row.id}}中的数据未被解释。

尝试这样：

angular.module('test', []) 
 
    .controller('GreetingController', ['$scope', 
 
    function($scope) { 
 
     $scope.data = [{ 
 
     name: 'John' 
 
     }, { 
 
     name: 'Bill' 
 
     }]; 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="test" ng-controller="GreetingController"> 
 
    <div ng-repeat="row in data"> 
 
    <button class="btn" uib-popover-template="myTemplate_row.html" popover-trigger="mouseenter">View</button> 
 
    </div> 
 
</div> 
 

 
<script type="text/ng-template" id="myTemplate_row.html"> 
 
    <strong>Name</strong>: {{row.name}} 
 
    <br/> 
 
    <strong>Phone</strong>: {{row.phone}} 
 
    <br/> 
 
    <strong>Email</strong>: {{row.email}} 
 
</script>

注例如不工作，我没有UIB模块，但基本是相同的，应该显示。