【问题标题】:AngularJS ng-repeat does not update after Ajax callAngularJS ng-repeat 在 Ajax 调用后不更新
【发布时间】:2016-12-15 18:47:06
【问题描述】:

我有一个 AngularJS 应用程序。 在应用程序的右侧,我与客户保持聊天。

html 如下:

<div class="recent" ng-show="show_chat_list">
    <h2></h2>
    <div ng-repeat="customer in recent_customer_list track by $index" ng-click="start_chat(recent_client_id[$index])" class='user'>
        <a href="#" ng-class="{'red-background': notify[$index]}">
            <img ng-src="">
            <div class="user-data">
                <span class='name'> {{ notify }} </span>
                <span class='name'>{{ customer.name }}</span>
            </div>
        </a>
    </div>
</div>

我通过一个每秒轮询新信息的工厂更新了列表:

factory('Poller', ["$http", "store", "URL", function($http, store, URL){

    var data = {
        "hairdresser_id": store.get("userId")
    }

    var poller = function(){
        return $http.post(URL.url + 'check_for_notifications', data).then(function(res){
            return(res.data);
        });
    }

    return {
        poll: poller
    };
}]);

在控制器中:

pollData();

function pollData(){
    Poller.poll().then(function(res){
        $scope.recent_customers_list = res.customers;
        console.log($scope.recent_customers_list[0].name);
        $scope.recent_client_id = res.clients_id;
        $scope.notify = res.notify;
        $timeout(pollData, 1000);
    });
}

console.log 函数总是打印正确的名称(即使我更改了它),但在 html 中并不反映客户端列表的动态更改(例如,如果我更改名称或添加客户端)。

如果我插入

$scope.$apply();

$scope.$digest;

就在 $timeout 行之前我收到错误:

Error: [$rootScope:inprog] $digest already in progress

如果我在 functino pollData() 行之后和 Poller.poll() 行之前插入 apply ,我会收到此错误:

Error: [$rootScope:inprog] $apply already in progress

但我的列表根本没有更新。我需要刷新才能看到更改。 我该如何解决这个问题?

【问题讨论】:

    标签: javascript angularjs ajax dom data-binding


    【解决方案1】:

    在您的控制器中,您正在使用

    $scope.recent_customers_list
    

    但在您的 html 中,您正在使用

    recent_customer_list
    

    我相信这是一个简单的错字。

    【讨论】:

    • 我爱你。我很绝望:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-02
    • 2016-04-20
    相关资源
    最近更新 更多