javascript - 如何通过函数更新 $scope 变量

Question

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

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

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;
      }
    });
  }

});

Answer 1

Angular 不会神奇地知道对象的属性何时发生变化，它必须始终重新检查所有对象以捕获此类更改。 Angular 只是让它看起来像是每当您使用任何 Angular 服务或事件时它都会注意到此类更改，因为它们会触发摘要周期。在摘要周期结束时，Angular 检查它所知道的对象是否有更改并传播这些更改(例如更新 View 等)。

当您使用 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);
        }

  ...

});