firebaseを使って画像を動的に変更する

Question

教師が学校の生徒のクラスを選択できるページがあります。次に、教師は生徒のアバターをドラッグして、このクラスの生徒のグループを作成できます。

私はクラスのドロップダウンリストと、学生のアバターでいっぱいの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> 

コントローラコード：

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

1. 私は 前$rootScope.classStudentsに手動でデータを追加する場合は、ページがアバターが正しく表示されますロードします。 $rootScope.classStudents = dataSnapshot.val().members;後

2. console.log($rootScope.classStudents)は、右のデータが存在していることを確認し 。

3. しかし、アバターは表示されません。

4. ブラウザで「戻る」をクリックして「転送」すると、アバター「 」が表示されます。これは私に、 が<img ng-repeat...にリフレッシュするよう指示するものが必要だと思うようになります。

Answer 1

あなたは$ rootScopeを逃しているあなたは、角度の外で何かをやったとして$適用されます。

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

Answer 2

はにsrc="http://placehold.it/30x30/{{value}}"を設定ng-src="http://placehold.it/30x30/{{value}}"を使用して、ダイジェストにsrc属性を追加します。

また$rootScope.$applyまたは$timeout(angular.noop)あなたはIMG]タブに代わり、srcの `NG-SRC」を使用し