如何通过函数更新 $scope 变量答案

【问题标题】：How to update $scope variables through a function如何通过函数更新 $scope 变量
【发布时间】：2018-11-15 02:34:20
【问题描述】：

我目前正在从端点获取一些数据，然后更新一个名为$scope.response 的变量。我不太确定如何更新此变量并将其呈现在屏幕上。那么下面的代码会发生什么：我从 iframe 的 src 属性中获取查询字符串，然后将其发布到我的端点，在那里我得到一个名为 data 的特定响应。我想用这个对象更新$scope.response，然后使用{{response}} 在视图上渲染它。

有人可以告诉我如何做到这一点吗？

app.controller('MainCtrl', function($scope) {

  $scope.response;

  API = {};
  API.endpoint = 'https://some/endpoint/';


  function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }

  function doAjax(callback) {
    var q = getParameterByName('QUERY');
    jQuery.ajax({
      url: API.endpoint + "script.php",
      method: "POST",
      data: { q: q },
      dataType: "json",
      success: function (data) {
        callback(data);
        $scope.response = data;
      }
    });
  }

});

【问题讨论】：

不要使用 jQuery ajax。使用 angular $http 这样您就不必告诉 angular 来更新视图。注意设置与发送表单编码数据有点不同，默认是 $.ajax 而 $http 默认是发送 json
要使用 jQuery ajax，您需要在范围更改后调用 $scope.apply()。通常在 Angular 应用程序中不需要 jQuery

标签： javascript angularjs asynchronous

【解决方案1】：

Angular 不会神奇地知道对象的属性何时发生变化，它必须一直重新检查所有对象才能捕捉到这些变化。 Angular 只是让它看起来像是在您使用任何 Angular 服务或事件时注意到这些变化，因为它们触发了一个摘要循环。在摘要周期结束时，Angular 检查它知道的对象的更改并传播这些更改（例如更新视图等）。

当您使用 jQuery 时，这是 Angular 所知道的“外部”。主要你不应该使用 jQuery，而是 Angular's $http service 来发出任何网络请求，因为 Angular 会正确地循环它的消化系统。*

_{* 完全是双关语}

如果您必须使用一些非 Angular 系统（同样，您真的完全不必在这里），那么您需要触发另一个摘要循环。最好的方法是使用$timeout 服务：

app.controller('MainCtrl', function($scope, $timeout) {

  ...

        success: function (data) {
          callback(data);
          $timeout(() => $scope.response = data);
        }

  ...

});

【讨论】：

【解决方案2】：

为什么在 Angular 中使用 jQuery？如果你选择 Angular，你应该是 Angular 中的 $http。删除函数 doAjax 并将其替换为 $http。你可以在这里阅读文档https://docs.angularjs.org/api/ng/service/$http

【讨论】：