[英]Angular.js view doesn't update on $http XHR results
I am trying to build a search function using Angular and a RESTful web service. 我正在尝试使用Angular和RESTful Web服务构建搜索功能。 I am a complete newbie to Angular, so bear with me. 我是Angular的新手,所以请耐心等待。
I have the event handling and communication with the web service wired and working. 我有事件处理和与Web服务的通信有线和工作。 Problem is that my view never gets updated when I assign the results of my search query to the $scope in the $http success callback. 问题是当我将搜索查询的结果分配给$ http成功回调中的$ scope时,我的视图永远不会更新。
However, I do get data back in the $http
callback and if I try to update my model in this callback using static data, this does not show up either. 但是,我确实在$http
回调中获取了数据,如果我尝试使用静态数据在此回调中更新我的模型,则这也不会显示。
I am at a complete loss whether I am pushing my result records to a wrong $scope
or what is going on. 无论我是将结果记录推送到错误的$scope
还是正在发生的事情,我都完全失去了。 $scope.$apply()
does not work because a model update is already in progress. $scope.$apply()
不起作用,因为模型更新已在进行中。 I also tried different versions of Angular, to no avail. 我也试过不同版本的Angular,但没有用。 Using $resource instead of $http
did nothing to solve the problem. 使用$ resource而不是$http
没有解决问题。
Anyone got an idea? 有人有个主意吗? Thanks in advance 提前致谢
I also set up a JSFiddle with a bit more diagnostics in the controller 我还在控制器中设置了一个带有更多诊断功能的JSFiddle
My HTML: 我的HTML:
<div ng-app="myApp"> <div ng-controller="SearchCtrl"> <div ng-repeat="result in results" class="result"> <div class="board"> <div class="name">{{result.board}}</div> <div class="posts">{{result.posts}}</div> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> <div> <form ng-submit="doSearch()" ng-controller="SearchCtrl" name="search" id="search"> <input type="text" value="" ng-model="searchTerm" name="q" id="searchterm"></input> <button class="search" id="searchbtn" type="submit">Search</button> </form> </div> </div>
my controller: 我的控制器:
myApp.controller('SearchCtrl', function ($scope, $http) {
$scope.results = [];
$scope.doSearch = function () {
data = 'json=' + encodeURIComponent(angular.toJson([{
board: "one", posts: 435
}, {
board: "two", posts: 123
}]));
$http.post('/echo/json/', data, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).success(function (data) {
for (var i in data) {
$scope.results.push(data[i]);
}
});
};
})
You are creating two instances of the controller. 您正在创建控制器的两个实例。 The form and the list must be inside the same <div ng-controller="SearchCtrl">
element. 表单和列表必须位于相同的<div ng-controller="SearchCtrl">
元素中。 <form>
should not have its own SearchCtrl
<form>
不应该有自己的SearchCtrl
See problem fixed here: http://jsfiddle.net/EeUrY/68/ . 看到这里修复的问题: http : //jsfiddle.net/EeUrY/68/ 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.