2

I'm using twitter bootstrap with a popover and got a AngularJS scoped variable to appear correctly. The below works.

(data-content="{{notifications[0].user}} shared {{notifications[0].user_two}}'s records")

When I add the following

(data-content="<b>{{notifications[0].user}} shared {{notifications[0].user_two}}'s records</b>")

No errors show up, but all of the {{}} no longer render.

So I tried this as a test of sorts

(data-content="<div ng-repeat='item in notifications'>test {{item}} <br/><hr/></div>")

Much like the last example, I see the "test" but not the {{item}}. And the "test" only show s up once, even though the notifications had three elements. When I look at the DOM there's this

<div class="popover-content">
    <div ng-repeat="item in notifications">you  <br><hr></div>
</div>

I've also tried just creating a directive to iterate through the array and make the output I want, but my attempt to set data-content equal to a directive have been failures. The examples I've found elsewhere I'm confident would work, but I just wanted to confirm before I begin implementing something like this (http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service) or (Html file as content in Bootstrap popover in AngularJS directive) that I'm not missing a straightforward fix to the problem I outlined above that would not require me creating a directive.

Edit:

Plunkr Url http://plnkr.co/edit/VZwax4X6WUxSpUTYUqIA?p=preview

Community
  • 1
  • 1
Morgan
  • 1,438
  • 3
  • 17
  • 32
  • please create a plunker – Aidin May 01 '14 at 20:11
  • Are you using ui-bootstrap? – aet May 01 '14 at 20:11
  • Created a plunkr and, no, I am not using ui-bootstrap. Just standard boostrap and then standard angular. – Morgan May 01 '14 at 20:36
  • Well, if you ever decide to use ui-bootstrap (and I would highly recommend it) then I can provide you with what I consider the "missing" popover directives - html popover, html unsafe popover, template popover, and a popover that pulls content from another element, oh, and a global popover closer for when the user clicks outside the popover. – aet May 01 '14 at 20:40
  • This is definitely a problem caused by jquery because as you see in the following plunker, angular has no problem iterating the array: http://plnkr.co/edit/bXkA21yvk1FctGkq0ME6?p=preview Can you try providing your html using a partial instead of data-content? – Aidin May 01 '14 at 20:50
  • Somebody already have answered this question: http://stackoverflow.com/questions/20894104/bootstrap-popover-not-working-inside-angularjs-ng-repeat – Aidin May 01 '14 at 21:10
  • Using a directive. As I said in my post, I'm aware of those options and was looking for a non-directive solution (I currently have it working with a directive similar to the ones I referenced). It's possible there just isn't one :) – Morgan May 01 '14 at 22:01

1 Answers1

0

html might be breaking it, try marking it as trusted html using $sce

How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

<button ... data-content="trustedHtml" ...> </button>
Community
  • 1
  • 1
SoluableNonagon
  • 11,541
  • 11
  • 53
  • 98