Question

我目前正在努力从端点获取一些数据，然后更新一个名为$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;
      }
    });
  }

});

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

  ...

});

Answer 2

为什么在Angular中使用jQuery？如果选择“ Angular”，则应使用“ $ http”作为“ angular”。删除功能doAjax并将其替换为$ http。您可以在https://docs.angularjs.org/api/ng/service/$http

中阅读文档

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

2 个答案: