Question

我正在使用$http在Angular中构建一个http请求，并尝试更新位于＆＃39; $ scope＆＃39;在响应中返回数据。当我收到来自节点后端的响应时，我设置了＆＃39; $ scope.data = data;＆＃39;在成功回调中。当我单步执行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>

我可以为数据设置一个值并使其显示在加载状态，但是当值更改时，它不会被重绘。我的理解是＆＃39; $ http＆＃39;原因＆＃39; $ digest＆＃39;被调用哪个应该重新绘制任何修改过的模型。

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。我最终通过创建一个新指令来解决问题，试图隔离范围和问题。

下面是我的button-directive.js和markup。

(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>

Answer 4

您是否尝试过angular-sails-bind将sailsjs模型绑定到角度范围模型？（https://github.com/diegopamio/angular-sails-bind）。我为自己的项目做了这个，然后决定将它作为一个独立的库，这样每个人都可以受益，我可以有第一次开发凉亭包的经验。

它基本上为您的客户端制作了一个实时（套接字）CRUD，可以自动地从风帆模型中保存和检索信息。

我希望它可以帮到你（虽然看起来你正在使用特定的控制器端点）。

在任何情况下，你甚至可以查看里面的代码，只是将它用于你自己的函数。

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

4 个答案: