ng-repeat 不更新 html

Question

我是 Angular 新手，在我的应用程序的 ng-repeat 问题上需要您的帮助。

问题： 我有一个 html 页面 (event.html)，在文件的相应控制器中，我向 firebase 集合发出请求并更新数组 ($scope.events)。问题是来自 firebase 的数据需要几秒钟才能加载，并且当数据到达 $scope.events 时，ng-repeat 已经执行并且它显示一个空白屏幕。当我点击 HTML 页面 (event.html) 中的按钮时，这些项目会正确显示。

事件顺序： 我有一个登录页面 (login.html)，我在其中输入用户名和电话号码，然后单击注册按钮。我已经配置了单击注册按钮以进入新状态（event.html）。

这是login.html的控制器代码：

$scope.register = function (user) {
    $scope.user = user.name;
    $scope.phonenumber = user.phonenumber;

    var myuser = users.child($scope.user);

    myuser.set({
        phone : $scope.phonenumber,
        Eventid : " ",
        name : $scope.user
    })
    var userid = myuser.key();
    console.log('id is ' +userid);
    $state.go('event');
}

event.html（状态：event）的控制器代码如下：

var ref = new Firebase("https://glowing-torch-9862.firebaseio.com/Users/Anson/Eventid/");
var eventref = new Firebase("https://glowing-torch-9862.firebaseio.com/Events");
var myevent = " ";
$scope.events = [];

$scope.displayEvent = function (Eventid) {
    UserData.eventDescription(Eventid)
    //UserData.getDesc()
    $state.go('myevents');
    //console.log(Eventid);
};
function listEvent(myevents) {
    $scope.events.push(myevents);
    console.log("pushed to array");
    console.log($scope.events);
};
function updateEvents(myevents) {
    EventService.getEvent(myevents);
    //console.log("success");
};

ref.once('value', function (snapshot) {
    snapshot.forEach(function (childSnapshot) {
        $scope.id = childSnapshot.val();
        angular.forEach($scope.id, function(key) {
            eventref.orderByChild("Eventid").equalTo(key).on("child_added", function(snapshot) {
                myevents = snapshot.val();
                console.log(myevents) // testing 26 Feb
                listEvent(myevents);
                updateEvents(myevents);
            });
        });
    });
});

$scope.createEvent = function () {
    $state.go('list');
}

event.html 包含以下代码：

<ion-view view-title="Events">
    <ion-nav-buttons side="primary">
        <button class="button" ng-click="createEvent()">Create Event</button>
        <button class="button" ng-click="showEvent()">Show Event</button>
    </ion-nav-buttons>
    <ion-content class="has-header padding">
        <div class="list">
            <ion-item align="center" >
                <button class= "button button-block button-light" ng-repeat="event in events" ng-click="displayEvent(event.Eventid)"/>
                {{event.Description}} 
            </ion-item>
        </div>
    </ion-content>
</ion-view>

按钮showEvent 是我添加到HTML 文件中以测试ng-repeat 的虚拟按钮。我可以在控制台中看到从 firebase 下载数据大约需要 2 秒，如果我在加载数据后单击“显示事件”按钮，ng-repeat 会按预期工作。在我看来，当ng-repeat 对数组$scope.events 进行操作时，不会从firebase 中检索到数据，因此它是空的，因此它没有任何数据可以呈现到HTML 文件中。 ng-repeat 在我单击虚拟按钮（“显示事件”）时按预期工作，因为在单击时会触发摘要循环。对于这篇冗长的帖子，我深表歉意，如果你们中的任何人能给我一个克服这个问题的方向，我将不胜感激。我一直在互联网和 stackoverflow 中搜索，发现了许多博客和线程，这让我知道问题出在哪里，但我无法让我的代码正常工作。

Answer 1

一旦您更新了事件数组调用$scope.$apply(); 或执行代码更改事件数组作为$scope.$apply 函数的回调

$scope.$apply(function(){
  $scope.events.push(<enter_your_new_events_name>);
})

Answer 2

如果您在控制器范围之外工作，例如在服务、指令或任何外部 JS 中。您需要在数据更改后触发摘要循环。

您可以通过

触发摘要循环

$scope.$digest(); 或使用$scope.$apply();

希望对你有帮助。

谢谢

Answer 3

在您的情况下，您必须延迟绑定时间。在您的视图中使用具有 debounce 属性的 $timeout 函数或 ng-options。

您必须设置一个粗略的时间来从其余 API 调用中获取数据。使用以下任何一种方法都可以解决您的问题。

方法一：

var myapp = angular.module("myapp", []);
myapp.controller("DIController", function($scope, $timeout){
    $scope.callAtTimeout = function() {
        console.log("$scope.callAtTimeout - Timeout occurred");
    }
    $timeout( function(){ $scope.callAtTimeout(); }, 3000);
});

方法二：

// in your view
<input type="text" name="userName"
       ng-model="user.name"
       ng-model-options="{ debounce: 1000 }" />