gpt4 book ai didi

angularjs - Angular UI Bootstrap : Dynamic popover template ID

转载 作者:行者123 更新时间:2023-12-03 22:27:27 26 4
gpt4 key购买 nike

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 模板。

我接近这个权利吗?如果没有,将动态 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 模块,但基础知识是相同的,应该会显示出来。

关于angularjs - Angular UI Bootstrap : Dynamic popover template ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37557147/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com