AngularJS 和 jQuery 警报答案

【问题标题】：AngularJS and jQuery alertAngularJS 和 jQuery 警报
【发布时间】：2016-03-31 12:08:48
【问题描述】：

我只是好奇为什么下面的代码可以工作：

<script>
    var app = angular.module('VEL',[]);
    app.controller('VELControl', function($scope, $http) {
        $.getJSON("../json/dict.php?p="+$_GET['p'], function(response){
        $scope.velData = response;
    });
    alert($scope.velData); // also works with alert($scope);
  });

但是当我删除 alert(...) 它停止工作。

谁能解释我为什么或参考文档？

【问题讨论】：

“停止工作”是什么意思？什么停止工作？
另外，你绝对应该使用 $http 服务而不是 jQuery 的 ajax 方法，因为 $http 与 Angular 的摘要循环相关联
数据不会显示，但仍会收到。
停止工作是指它不会打印任何东西吗？警报只是创建警报框，如果它被删除，$scope.velData 仍然设置，但如果你不做任何其他事情，就没有办法看到它
通过使用 $http.get 我忘记了使用 response.data 而不是响应进行分配。现在我以适当的方式显示所有条目

标签： javascript jquery angularjs json

【解决方案1】：

主要问题是您使用的是 jQuery 的 $.getJSON() 方法，Angular 对此一无所知。 Angular 擅长跟踪异步事件何时发生并在它们完成时更新视图，但您必须使用 Angular 的服务来利用这一点。

Angular 为我们提供了 $http 服务来进行 AJAX 调用。由于$http 与 Angular 的摘要循环相关联（如果您从未听说过，请阅读此内容，了解 Angular 的工作原理至关重要），Angular 将在$http 返回数据并运行其回调后更新视图。

像这样重写你的控制器，它应该可以工作：

app.controller('VELControl', function($scope, $http) {
    $http.get("../json/dict.php?p="+$_GET['p']).then(function(response){
      $scope.velData = response.data;
    });
});

顺便说一句，您的alert() 使用旧方法可能是侥幸，这取决于您的服务器返回数据的速度。据我了解，alert() 无论如何都是异步运行的，所以当您调用alert($scope.velData) 时，它可能被推到浏览器执行队列的末尾，在到达之前，AJAX 调用返回并设置您需要的值。如果您的服务器速度较慢，您可能会提醒undefined 并且然后收到您的数据。如果您可以控制服务器（看起来像您一样），这可能是一个有趣的尝试：放入sleep(10) 或类似的等待以强制服务器花费很长时间；尝试不同的值，看看alert() 语句会发生什么。

【讨论】：