如何使用 $http 响应更新 Angular 模型？

Question

我正在 Angular 中使用 $http 构建一个 http 请求，并尝试使用响应中的数据 return 更新位于“$scope”中的模型。当我收到来自我的节点后端的响应时，我正在设置“$scope.data = data;”在成功回调中。当我单步执行 javascript 时，我可以看到响应是正确的并且存在状态代码。这是我正在尝试做的示例：

angular.module("Sample").controller('MainCtrl', ['$http', '$scope', function($http, $scope) {

this.testcall = function (url) {

  $http.post(url).success(function (data, status) {
    console.log(data);
    $scope.data = data;
    $scope.status = status;
    console.log($scope.data);
  }).error(function (data, status) {
    console.log('failed');
    $scope.response = 'failed call';
    $scope.status = status;
  });
};
}

在我的 html 模板中，我在 div 中设置了控制器，我正在尝试显示该响应。

<div ng-controller="MainCtrl as main">
  {{data}}
</div>

我可以为数据设置一个值并让它在加载时显示，但是当值更改时它不会被重新绘制。据我了解，“$http”会导致调用“$digest”，这应该会重绘任何修改后的模型。

Answer 1

要使其正常工作，您需要将范围变量绑定到控制器 this 上下文写 this.data = data; 而不是 $scope.data 因为你使用的是 controllerAs 语法。

代码

  $http.post(url).success(function (data, status) {
    console.log(data);
    this.data = data;
    this.status = status;
    console.log(this.data);
  }).error(function (data, status) {
    console.log('failed');
    this.response = 'failed call';
    this.status = status;
  });

标记

<div ng-controller="MainCtrl as main">
  {{main.data}}
</div>

Answer 2

我已经在 this plunker 中重新创建了与您几乎完全相同的场景，并且一切都按预期进行。

function MainCtrl($scope, $http) {
 this.testcall = function(url) {
   $http.get(url).success(function(data, status) {
     console.log(data);
     $scope.data = data;
     $scope.status = status;
     console.log($scope.data);
   }).error(function(data, status) {
     console.log('failed');
     $scope.response = 'failed call';
     $scope.status = status;
   });
 };
}

MainCtrl.$inject = ['$scope', '$http'];

angular.module('sample', [])
 .controller('MainCtrl', MainCtrl);

index.html

<div ng-controller="MainCtrl as main">
  <button type="button" class="btn btn-primary" 
          ng-click="main.testcall('data.json')">Test Call</button>
  {{data}}
</div>

您没有向我们展示的较大示例可能存在问题。

Answer 3

我相信我最初的问题是 $scope。我最终通过创建一个新指令来解决问题，试图隔离范围和问题。

下面分别是我的按钮-directive.js 和标记。

(function() {
  var app = angular.module('Sample', []);

  app.directive('submitButton', function() {
    return {
      restrict: 'E',
      scope: {}
    };
  });

  app.controller('SubmitCtrl', ['$http', '$scope',
    function($http, $scope) {
      this.submit = function() {
        console.log('hit');
        $http.get('http://ip.jsontest.com/').success(function(data, status) {
          $scope.data = data;
          $scope.status = status;
          console.log(data);
        }).error(function(data, status) {
          $scope.status = status;
          $scope.data = data;
        });
      };
    }
  ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Sample">
  <div ng-controller="SubmitCtrl as controller">
    <button type="submit" ng-click="controller.submit()">Submit</button>

    Response Data: {{data}}
    <br/>Status Code: {{status}}
  </div>
</div>

如何使用 $http 响应更新 Angular 模型？

How to update Angular model with $http response?

javascript

http

angularjs

sails.js