Search code examples
angularjstwitter-bootstrapangularjs-directiveangularjs-scopeangularjs-controller

AngularJS popover bind to controller variable

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.

Solution

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