ajax - 使用 Angular 和 Ajax 将内容加载到 Bootstrap 弹出窗口中不起作用

Question

我正在尝试使用 Angular 和 Ajax 将内容填充到 Bootstrap 弹出窗口中。尽管数据已正确加载(正如我在 console.log 中看到的那样)，但结果不会出现在弹出窗口的内容中。我认为当 Bootstrap 弹出窗口加载时， Angular 的加载尚未准备好。因此，如何在 Angular 加载后立即填充此弹出窗口？

这是代码:

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

您可以将函数放入 Controller 中，以获得 Angular 周期。并且，还定义对 $timeout 事件的 jquery 调用。

请在 jsbin 上查看此示例:jsbin

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

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

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

}