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

我正在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>

{{data}}

---

我可以将一个值设置为data并使其在加载时显示，但当值更改时，它不会被重新绘制。我的理解是，'$http'导致调用'$digest'，它应该重新绘制任何修改过的模型

要使其工作，您需要将范围变量绑定到控制器

此

上下文 写入

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>

{{main.data}

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

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>

测试呼叫
{{data}}

---

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

我相信我最初的问题是

$scope

。我最终解决了这个问题，创建了一个新的指令，试图隔离范围和问题

下面是我的button-directive.js和标记

（函数（）{
var app=angular.module（'Sample'，[]）；
app.directive（'submitButton'，function（）{
返回{
限制：'E'，
作用域：{}
};
});
app.controller（'SubmitCtrl'，['$http'，'$scope'，'，
函数（$http，$scope）{
this.submit=函数（）{
console.log（'hit'）；
$http.get（'http://ip.jsontest.com/）。成功（功能（数据、状态）{
$scope.data=数据；
$scope.status=状态；
控制台日志（数据）；
}).错误（功能（数据、状态）{
$scope.status=状态；
$scope.data=数据；
});
};
}
]);
})();

提交
响应数据：{{Data}}

状态代码：{{Status}
您是否尝试过将角度帆绑定到将角度帆模型绑定到角度范围模型上？(). 我为自己的项目制作了它，然后决定把它作为一个独立的库，这样每个人都能从中受益，我可以有我的第一次开发bower软件包的经验

它基本上为您的客户机制作了一个实时（套接字）CRUD，用于自动保存和检索来自sails模型的信息

我希望它能帮助您（尽管您似乎正在使用特定的控制器端点）

在任何情况下，您甚至可以查看内部代码，将其用于自己的函数。
不过，我正在将“$scope”注入控制器中。标记不应该识别它吗？我最终将按钮分解成一个自定义指令，并从那里发出http请求。我尝试用this.data=“bla”定义数据，然后用http请求更新数据，如下所示。data=data。。。。。没有骰子！！由于某些原因，main.data或this.data变量无法更新。它只存储一次，就这样？但它在$scope下运行良好。。。所以我不知道。也许是因为视图上的数据绑定？我讨厌angular@rikkitikkitumbo-也许如果你问一个单独的问题，或者我可以帮你解决上面的问题？基本上，我已经用this.data替换了$scope.data，但它似乎不起作用。@rikkitkitumbo-我知道发生了什么，它与角度无关。我已经用你需要了解的所有信息对plunker进行了分叉和更新。