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

Question

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

例如：

<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>

当我将鼠标悬停在按钮上时，Angular会尝试从服务器获取模板（例如myTemplate_1.html），而不是使用ng-template。

我这样做对吗？如果不是，给弹出框分配动态html内容的最佳方法是什么？

谢谢。

- Nick

Answer 1

id必须是唯一的，而通过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 模块，但基本原理相同，应该能看懂。

- Jhecht

---

你必须将模板和触发器字符串放在单引号中才能使其正常工作 <button class="btn" uib-popover-template="'myTemplate_row.html'" popover-trigger="'mouseenter'">查看</button> - programmer