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.

kpentchev · Accepted Answer · 2015-05-11 12:42:31Z

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, 2015 at 12:42

kpentchev

3,0902 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gargaroz Over a year ago

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?

kpentchev Over a year ago

@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?

Gargaroz Over a year ago

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 Over a year ago

Plunker complete, still can't show the tooltip template.

kpentchev Over a year ago

@Gargaroz , For once, no ng-app defined and secondly, popover-template requires a reference to a scope variable.

|

eladcon · Accepted Answer · 2015-05-11 14:26:44Z

1

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.

answered May 11, 2015 at 14:26

eladcon

5,8251 gold badge18 silver badges19 bronze badges

Comments

Gargaroz · Accepted Answer · 2015-05-12 08:59:26Z

0

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.

answered May 12, 2015 at 8:59

Gargaroz

3109 silver badges28 bronze badges

Collectives™ on Stack Overflow

AngularJS popover bind to controller variable

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related