使用ng-repeat数据的AngularJS UI Bootstrap popover

时间:2015-10-14 01:36:38

标签: angularjs angularjs-ng-repeat angular-ui-bootstrap

我有一个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;
&#13;
&#13;

谢谢

2 个答案:

答案 0 :(得分:4)

我使用功能代码解决了这个问题,如下所示

&#13;
&#13;
(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;
&#13;
&#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];
    }
}
})();