Angular.js视图不会更新$ http XHR结果

时间:2013-07-02 21:34:31

标签: javascript angularjs xmlhttprequest

我正在尝试使用Angular和RESTful Web服务构建搜索功能。我是Angular的新手,所以请耐心等待。

我有事件处理和与Web服务的通信有线和工作。问题是当我将搜索查询的结果分配给$ http成功回调中的$ scope时,我的视图永远不会更新。

但是,我确实在$http回调中获取了数据,如果我尝试使用静态数据在此回调中更新我的模型,则这也不会显示。

我是否完全失去了我是否将结果记录推送到错误的$scope或正在发生的事情。 $scope.$apply()不起作用,因为模型更新已在进行中。我也试过不同版本的Angular,但没有用。使用$ resource而不是$http没有解决问题。

有人有个主意吗?提前致谢

我还在控制器

中设置了JSFiddle以及更多诊断功能

我的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>
    

我的控制员:

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

1 个答案:

答案 0 :(得分:3)

您正在创建控制器的两个实例。表单和列表必须位于相同的<div ng-controller="SearchCtrl">元素内。 <form>不应该有自己的SearchCtrl

请参阅此处修复的问题:http://jsfiddle.net/EeUrY/68/