javascript - 使用 firebase 动态更改 img ng-repeat

Question

我有一个页面，老师可以在其中选择(学校学生的)类(class)。然后老师可以通过拖动学生头像来创建本类(class)的学生分组。

我有一个类的下拉列表和一个 div充满了学生的头像。

HTML:

<select name="chosenClass" onchange="chooseClass(this.value)">
    <option ng-repeat="(key, value) in techerClasses">{{key}}</option>
</select>
...
<div id="div0" ondrop="drop(event)" ondragover="allowDrop(event)" class="groupDiv">
    <img ng-repeat="(key, value) in classStudents"  id={{key}} src="http://placehold.it/30x30/{{value}}" draggable="true" ondragstart="drag(event)">
</div>

Controller 代码:

chooseClass = function (classInfo) {
    if (classInfo > 0){
        $rootScope.classesRef.child(classInfo).on('value', function (dataSnapshot){
            $rootScope.classStudents = dataSnapshot.val().members;
        });
    }
}

1. 如果我手动将数据添加到 $rootScope.classStudents前页面加载后头像将正确显示。

2. console.log($rootScope.classStudents)后 $rootScope.classStudents = dataSnapshot.val().members;证实那里有正确的数据。

3. 但头像没有显示。

4. 如果我在浏览器中单击“后退”，然后单击“前进” - 头像将会呈现。这让我觉得我需要一些东西告诉<img ng-repeat...刷新？

Answer 1

您缺少 $rootScope.$apply，因为您做了 Angular 之外的操作:

chooseClass = function (classInfo) {
    if (classInfo > 0){
        $rootScope.classesRef.child(classInfo).on('value', function (dataSnapshot){
            $rootScope.classStudents = dataSnapshot.val().members;
            $rootScope.$apply();
        });
    }
}

或者考虑使用$firebaseArray:

chooseClass = function (classInfo) {
    if (classInfo > 0){
        $rootScope.classStudents = $firebaseArray($rootScope.classesRef.child(classInfo).child('members'))
    }
}