我有一个ng-repeat,我需要在迭代中使用当前对象来创建uib-popover内容的主体。
我尝试了uib-popover-html,但是我得到了一个有角度的不安全上下文错误。我尝试了一个使用$ sce返回HTML字符串的函数,但也失败了。
有没有办法使用序列中的当前对象在ng-repeat内构建popover消息的内容?
更新
@Claies:这是我尝试使用的代码示例
(function () {
'use strict';
angular.module('myModule').controller('myController', ['$scope', '$sce', myModule])
function myModule($scope, $sce) {
var vm = this;
vm.getPopoverData = function(s) {
return $sce.trustAsHtml('<ul><li>' + s.Value1 + '</li><li>' + s.Value2 + '</li></ul>');
}
}
})();
&#13;
<div class="col-xs-4" ng-repeat="s in vm.sequences>
<button uib-popover-html="vm.getPopoverData(s)" popover-trigger="mouseenter" type="button" class="value btn">s.text</button>
</div>
<!-- This returns Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations -->
<div class="col-xs-4" ng-repeat="s in vm.sequences>
<button uib-popover-html="'<ul><li>{{s.value1}}</li><li>{{s.value2}}</li></ul>'" popover-trigger="mouseenter" type="button" class="value btn">s.text</button>
</div>
<!-- This returns Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context. -->
&#13;
谢谢
答案 0 :(得分:4)
我使用功能代码解决了这个问题,如下所示
(function () {
'use strict';
angular.module('myModule').controller('myController', ['$scope', '$sce', myModule])
function myModule($scope, $sce) {
var vm = this;
vm.trusted = {};
vm.getPopoverData = function(s) {
var html = '<ul><li>' + s.Value1 + '</li><li>' + s.Value2 + '</li></ul>';
return trusted[html] || (trusted[html] = $sce.trustAsHtml(html));
}
}
})();
&#13;
这停止了循环错误并使弹出窗口正确显示。
感谢Claies的所有帮助。
答案 1 :(得分:1)
你的意思是
(function () {
'use strict';
angular.module('myModule').controller('myController', ['$scope', '$sce', myModule])
function myModule($scope, $sce) {
var vm = this;
vm.trusted = [];
vm.getPopoverData = function(s) {
var html = '<ul><li>' + s.Value1 + '</li><li>' + s.Value2 + '</li></ul>';
trusted[html] || (trusted[html] = $sce.trustAsHtml(html));
return trusted[html];
}
}
})();