javascript – ng-repeat不会更新html

2023年4月12日 152次阅读

我是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的控制器(state：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中搜索,并遇到了一些博客和线程,让我知道问题是什么,但我无法使我的代码工作.

最佳答案 更新事件数组后,调用$scope.$apply();或者执行更改events数组的代码作为$scope.$apply函数的回调

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