AngularJS popover bind to controller variable

Question

I'm trying to create a popover and load content into it directly from a controller.

I can succesfully bind flag into the tooltip using a directive from this answer, but the popover keeps showing the initial value of flag, even if I change flag's value with the second button.

The point is that I wish the content of the popover to change dinamically along with the variable in the controller.

How can I make the trick?

Here's the directive:

var app = angular.module('plunker', []);

app.directive('popover', function($compile, $timeout){
return {
restrict: 'A',
link:function(scope, el, attrs){
  var content = attrs.content;
  var settings = scope.$eval(attrs.popover);
  var elm = angular.element('<div />');
  elm.append(attrs.content);
  $compile(elm)(scope);
  $timeout(function() {
    el.removeAttr('popover').attr('data-content',elm.html());
    el.popover(settings);
   });
  }
}

Here comes the plunker

2ND STEP

I wish I can set the container of the popover to be the <body> using that directive, so I can make the popover width 1/3 of the page.

score 1 · Answer 1 · answered May 11 '15 at 12:42

1

Regarding your first problem with updating the body value - you are not binding to the scope variable, but are reading the value assigned to the element attribute in var content = attrs.content;

Since you are already using bootstrap popover, take a look at angular-ui bootstrap, who have implemented a popover directive. They support custom templates using the popover-template attribute.

answered May 11 '15 at 12:42

kpentchev

3,040
2
24
41

The angular-ui bootstrap popover is ok, but I still can't pass it a template successfully; I placed a template named "popoverInfo.html" in the view folder (I used Yeoman to scaffold the web-app, so I refer to a so built directory tree) but it won't load neither by passing `popover-template="popoverInfo.html"` to the element nor `popover-template="views/popoverInfo.html"`.Where am I wrong? – Gargaroz May 11 '15 at 14:29
1

@Gargaroz can you use firebug or simiral to check that the XSR request made by angular is made against the URI where your template is hosted? – kpentchev May 11 '15 at 14:45
Pointed that when I modify the `popoverInfo.html` the webapp reloads correctly due to Grunt, I took a look to the network tab in the Chrome dev console and no `popoverInfo.html` is being fetched. – Gargaroz May 11 '15 at 14:53
[Plunker](http://plnkr.co/edit/4n3sp11k5eKdS264hM56) complete, still can't show the tooltip template. – Gargaroz May 11 '15 at 15:18
can you at least provide some hints on what I'm missing in the scenario from my plunker? – Gargaroz May 11 '15 at 15:47
1

@Gargaroz , For once, no `ng-app` defined and secondly, `popover-template` requires a reference to a scope variable. – kpentchev May 11 '15 at 19:29

score 1 · Answer 2 · answered May 11 '15 at 14:26

The problem is that the final html of the popover is not the one you compiled, just a copy of it.

You can instead set the content option to the compiled element itself:

    // remove the attribute so the popover will look at the content option value
    el.removeAttr('data-content');
    settings.content = elm;
    el.popover(settings);

See this plunker.

score 0 · Accepted Answer · answered May 12 '15 at 08:59

The real problem here is that the popover-template directive using a template which route is stored as a string in a $scope variable (as suggested by @kpentchev in the comments of the other answer) is available only with the angular-bootstrap version 0.13.0.

That version is not available in npm yet, so after I manually updated it using bower I was able to use correctly my custom popover.

AngularJS popover bind to controller variable

3 Answers3