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文件。当我点击虚拟按钮（＆＃39;显示事件＆＃39;）时，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

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

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

方法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);
});

方法2：

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

ng-repeat不会更新html

3 个答案: