Javascript ng repeat不会更新html

我是Angular新手，在我的应用程序的

ng repeat

问题上需要您的帮助

问题： 我有一个html页面（

event.html

），在文件的相应控制器中，我向firebase集合发出请求并更新数组（

$scope.events

）。问题是firebase的数据需要几秒钟才能加载，当数据到达

$scope.events

时，

ng repeat

已经执行，并显示一个空屏幕。当我点击HTML页面中的按钮（

event.HTML

）时，这些项目就会正确显示

事件顺序： 我有一个登录页面（

login.html

），输入用户名和电话号码，然后单击注册按钮。我已将此配置为单击register按钮进入新状态（

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

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

event.html

包含以下代码：

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

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

创建事件
表演活动
{{event.Description}

---

按钮

showEvent

是一个虚拟按钮，我添加到HTML文件中以测试

ng repeat

。我可以在控制台中看到，从firebase下载数据大约需要2秒钟，如果我在加载数据后单击“显示事件”按钮，

ng repeat

会按预期工作。在我看来，当

ng repeat

对数组

$scope.events

进行操作时，数据不会从firebase检索，因此其为空，因此，它没有任何数据可呈现到HTML文件

ng repeat

在我单击虚拟按钮（“显示事件”）时按预期工作，因为在该单击时触发了摘要循环。我为这篇冗长的帖子道歉，如果你们中的任何人能给我一个克服这个问题的方向，我将非常感激。我一直在互联网和stackoverflow中搜寻，遇到了许多博客和线程，这些博客和线程让我了解了问题所在，但我无法使我的代码正常工作。

一旦更新事件数组调用

$scope.$apply（）

或将更改事件数组的代码作为

$scope.$apply

函数的回调执行

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

$scope.$apply（函数（）{
$scope.events.push（）；
})

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

您可以通过以下方式触发摘要循环：

$scope.$digest（）或使用
$scope.$apply（）

我希望这对你有帮助

谢谢
对于您的情况，您必须延迟绑定时间。在视图中使用$timeout函数或带有去盎司属性的ng选项

您必须设置从RESTAPI调用获取数据所需的大致时间。使用以下任何一种方法都可以解决您的问题

方法1:

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 }" />

方法2:

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 }" />

//在您的视图中
我不熟悉Angular，但在React中，我对Firebase所做的是通过类似
ref.on（'value'，functionToExecuteWhenLoaded（））的方式监听数据。
我不确定Angular中是否可以，但我认为解决方法是使用
ref.on（）
方法监听数据，然后让
ng重复
点火。同样，总角度noob，但可能有人为您提供了一个代码示例。感谢Elliott，Angular支持ref.on方法。我把代码改为ref.on而不是ref.onceThank you antoniskamamis！！。$scope.apply有效。