Question

我正在尝试使用angular和ajax将内容填充到bootstrap popover中。虽然数据已正确加载（我可以在console.log中看到），但结果不会出现在popover的内容中。我认为在加载引导程序弹出窗口时，角度的加载还没有准备好。因此，如何在角度加载后立即填充此弹出窗口？

这是代码：

$(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>

提前致谢

Answer 1

您可以将您的功能置于控制器内部，以获得角度循环。而且，还要在$ timeout事件上定义你的jquery调用。

请在jsbin上查看此示例：jsbin

  return fetchedResultsController.sections![section].numberOfObjects

使用angular和ajax将内容加载到bootstrap popover中不起作用

1 个答案: