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

Question

我正在Angular中构建一个http请求,$http并尝试使用响应中的数据返回来更新位于"$ 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

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

下面分别是我的button-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>