是否可以将带有动态ID的模板用于Angular UI弹出框?
例如:
<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 模板。
我接近这个对吗?如果没有,将动态 html 内容分配给弹出框的最佳方法是什么?
谢谢。
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 模块,但基础知识是相同的,应该会显示出来。