使用 angular 和 ajax 将内容加载到引导弹出窗口不起作用

Question

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

这是代码：

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

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

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

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

}