2

I am trying to populate a content into an bootstrap popover using angular and ajax. Although the data have been loaded correctly (as i can see in console.log) the result don't appear in the popover's content. I think the angular's loading is not ready yet when the bootstrap popover is loaded. Thus, how can i populate this popover immediately after angular load?

This is the code:

$(function() {
  var p = $("#popover").popover({
    content: $("#popover-content").html(),
    html: true
  });

});

(function () {
  var app = angular.module("ng-app", []);

  app.controller("NotificationsController", function ($scope, $http) {
    $scope.links = [];
    $scope.load = function () {
      $http.get("json.php").success(function (response) {
        console.log(response);
        $scope.links = response;

        // the response return is somethin like
        // [
        //    {title: "Google", url: "http://www.google.com"},
        //    {title: "Gmail", url: "http://www.google.com"},
        // ]

      });
    };
    $scope.load();
  });
})();
<ul class="nav navbar-nav">
  <li data-ng-controller="NotificationsController as notification">
    <a href="#" data-toggle="popover" id="popover" title="Notificações" data-placement="bottom" data-trigger="focus">
      <span class="badge">{{links.length}}</span>
    </a>

    <div id="popover-content" style="display: none">
      <div data-ng-repeat="link in links">
        <a href="{{link}}">{{link.title}}</a>
      </div>
    </div>
  </li>
</ul>

Thanks in advance

Marco
  • 77
  • 7
  • 1
    I had the same problem, and I create a Question/Issue here... please read this, and try to adapts to your needs: http://stackoverflow.com/questions/27131078/how-to-replace-a-html-content-with-jsf-rerender-or-ajax-load-and-rebind-the-new – Joao Polo Aug 20 '15 at 14:08
  • Unfortunatelly, you suggestion didnt't work for me @JoaozitoPolo – Marco Aug 24 '15 at 17:23
  • I think my solution is a bit complicated. I wrote a new solution today, on my local project, I will try to apply at your code. – Joao Polo Aug 24 '15 at 21:27

1 Answers1

2

You can put your function inner the controller, to get angular cycle. And, also, define your jquery call on a $timeout event.

Please look this sample on jsbin: jsbin

controller('c', function($scope, $timeout) {

  $scope.getData = function() {
    return $("#popover-content").html();
  };

  $timeout(function() {
    $("#popover").popover({
      content: $scope.getData,
      html: true
    });
  });

}
Joao Polo
  • 2,153
  • 1
  • 17
  • 26