AngularJS UI Bootstrap popover 使用 ng-repeat 数据

Question

我有一个 ng-repeat，我需要在迭代中使用当前对象来创建 uib-popover 内容的主体。

我试过 uib-popover-html 但我收到 angular 不安全上下文错误。我尝试了一个使用 $sce returns 一个 HTML 字符串的函数，但也失败了。

有没有办法使用序列中的当前对象在 ng-repeat 中构建弹出消息的内容？

更新

@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>');
  }
 }
})();

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

谢谢

Answer 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>';
   return trusted[html] || (trusted[html] = $sce.trustAsHtml(html));
  }
 }
})();

这停止了循环错误并使弹出窗口正确显示。

感谢 Claies 的帮助。

Answer 2

你是说

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

AngularJS UI Bootstrap popover 使用 ng-repeat 数据

AngularJS UI Bootstrap popover using ng-repeat data

angularjs

angularjs-ng-repeat

angular-ui-bootstrap