javascript - How to update Angular model with $http response? - Stack Overflow

admin管理员组

文章数量:1313789

I'm building an http request in Angular using $http and trying to update a model located in '$scope' with the data return in the response. When I receive the response from my node backend, I'm setting '$scope.data = data;' within the success callback. When I step through the javascript, I can see that the response is correct and the status code is present. Here's a sample of what I'm trying to do:

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

And in my html template I have the controller set in the div and I'm trying to display that response.

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

I can set a value to data and have it appear on load, but when the value changes it's not being redrawn. It was my understanding that '$http' causes '$digest' to be called which should redrawn any modified models.

I'm building an http request in Angular using $http and trying to update a model located in '$scope' with the data return in the response. When I receive the response from my node backend, I'm setting '$scope.data = data;' within the success callback. When I step through the javascript, I can see that the response is correct and the status code is present. Here's a sample of what I'm trying to do:

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

And in my html template I have the controller set in the div and I'm trying to display that response.

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

I can set a value to data and have it appear on load, but when the value changes it's not being redrawn. It was my understanding that '$http' causes '$digest' to be called which should redrawn any modified models.

• javascript
• angularjs
• http
• sails.js

Share Improve this question Follow asked Apr 16, 2015 at 13:49 KyleKyle 8311 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

To get it working you need to bind scope variable to controller this context write this.data = data; instead of $scope.data because you are using controllerAs syntax.

Code

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

Markup

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

I've recreated nearly your exact scenario in this plunker and everything is working as expected.

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>

There may be a problem in the larger example you aren't showing us.

I believe my initial problem was the $scope. I ended up solving the problem by creating a new directive in an attempt to isolate the scope as well as the problem.

Below is my button-directive.js and markup respectively.

(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./').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./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>

本文标签： javascriptHow to update Angular model with http responseStack Overflow