CODEWITHSUNDEEP
ajaxangularjstwitter-bootstrap
Marco
Marco

Reputation: 77

Load content into bootstrap popover using angular and ajax don't work

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

Upvotes: 2

Views: 1553

Answers (1)

Joao Polo
Joao Polo

Reputation: 2163

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
    });
  });

}

Upvotes: 2

Related Questions