CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangular-ui-bootstrap
Fernando
Fernando

Reputation: 646

AngularJS UI Bootstrap popover using ng-repeat data

I have an ng-repeat and I need to use the current object in the iteration to create the body of uib-popover content.

I have tried uib-popover-html but I get an angular unsafe context error. I tried a function that returns an HTML string using $sce but that failed as well.

Is there a way to build the content of a popover message inside an ng-repeat using the current object in the sequence?

Update

@Claies: This is a sample of the code I was trying to use

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

Thank you

Upvotes: 3

Views: 4489

Answers (2)

user1464097
user1464097

Reputation: 41

You mean 

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

Upvotes: 1

Fernando
Fernando

Reputation: 646

I solved the issue using the function code as follows

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

This stopped the looping error and made the popover appear correctly.

Thank you Claies for all your help.

Upvotes: 4

Related Questions