CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
user718229
user718229

Reputation: 573

Add remote data to Popover using Angular JS

I was wondering if there is a way to add remote dynamic data to a Twitter BS Popover. Ive seen answers where they did it with ajax, but I was trying to use Angular...the code below doesnt work for popovers but similar code worked for modals. I think it has to do with not being able to put functions in the content parameter.. I have divs with ng-click(displayEvent($unixdate)) in a table that should run the code below:

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


function CalCtrl($scope, $http, $templateCache) {
   $scope.displayEvent = function(date) {
   $scope.url = "/cal/data.php?date="+date;
   $scope.method = 'GET';
   $scope.data = '';
    $scope.date = date;

   //popover
   $('.callink').popover({trigger:'hover', content:function(){




    $http({method: $scope.method, url: $scope.url, cache: $templateCache}).

    success(function(data, status) {
    $scope.data = JSON.stringify(data);

    return $scope.data;
                                    });
  }});

   //end popover
 };
}

Upvotes: 0

Views: 945

Answers (3)

Javi Muñoz Tous
Javi Muñoz Tous

Reputation: 88

I would do the same as Kludge and use AngularUI Bootstrap. It has some usefull tools.

Upvotes: 0

mfalaize
mfalaize

Reputation: 310

It is because the success function of the $http object is called asynchronously AFAIK. So the $scope.data response is never returned to the popover content function. You have to call the popover function inside of the $http.success() function :

$http({method: $scope.method, url: $scope.url, cache: $templateCache}).success(function(data, status) {
     var jsonData = JSON.stringify(data);

     $('.callink').popover({trigger:'hover', content:jsonData});
});

Upvotes: 0

Kludge
Kludge

Reputation: 2835

I admit I haven't put much effort in understanding the described scenario, but why jQuery? I'd examine AngularUI Bootstrap's popover.

Upvotes: 3

Related Questions