2016-09-23 14 views
0

基本的には単純ですが、動作させることはできません。angle:別のコントローラでデータが変更されたときにビューが更新されない

注:ionicを使用します。

私は:

  • 予め定義されたプレイリスト

  • UserPlaylistsためのビューとコントローラのビューおよびコントローラ。

  • UserPlaylistに曲を割り当てるイオンポップオーバー。

これは次のように動作します: 私はあらかじめ定義されたプレイリストの曲を見る。私は、UserPlaylistに追加する曲を選択します。 Popoverが表示され、UserPlaylistを選択して曲を追加することができます。私はそれを選択し、曲はUserPlaylistに追加されます。アプリは、定義済みプレイリストビューののままです。

すべて動作します。私は新しい歌でそれに切り替えるときUserPlaylistが更新されないとビューを除く- 私はUserPlaylistビューをリロードする必要があり、その後、私は新しい曲が追加さ見ることができます...

私はできませんでした$ apply()を使用すると、それはすでに処理中であると私に伝えられますか?イオンや角が何とかキャッシングするのですか?

プレイリストのHTML

<div ng-hide="loading"> 
     <h2>{{playlist.name}} &nbsp; 
     <button on-tap="addAllToUserPlaylist()" class="small add-to-playlist"></button> 
     <button on-tap="addAllToQueue()" class="small add-to-queue"></button> 
     <button on-tap="playAll()" class="small play"></button> 
     </h2> 

     <app-song can-like="true" can-add-to-queue="true" can-add-to-playlist="true" on-select="tappedSong(song)" item="song" ng-repeat="song in playlist.songs" /> 
    </div> 
    </ion-content> 

/** 
    * AddToPlaylist button was tapped 
    */ 
    function addToPlaylist(e){ 
    e.stopPropagation(); 

    // Show add to playlist template as a popover. 
    // Note that we're passing this directive's scope 
    // as the popover's parent scope. That way the popover's 
    // controller will have access to the variables here. 
    // Also, we're putting a reference to the popover in 
    // scope.popover so we can access it later to destroy it. 
    $ionicPopover.fromTemplateUrl('templates/add.to.playlist.html',{ 
     animation: 'slide-in-up', 
     scope: scope, 
     backdropClickToClose: false 
    }).then(function(popover){ 
     scope.popover = popover; 
     popover.show(); 
    }); 
    } 

UserPlaylistコード曲ディレクティブでコードをプレイリストに追加:

UserPlaylistDataSource.prototype.addSongs = function(songs, id, beginning, cbk){ 
    if(beginning){ 
    Array.prototype.unshift.apply(this.songs, songs); 
    } 
    else{ 
    Array.prototype.push.apply(this.songs, songs); 
    } 
    this.save(id, cbk); 
} 

ポップオーバーは追加コード:

$scope.add = function(playlist){ 

     var toAdd; 
     var msg = 'Agregaste $1 a la lista ' + playlist.name; 
     // If the parent scope has an 'item' it is the song they want to add 
     if($scope.item){ 
     toAdd = [$scope.item]; 
     msg = msg.replace('$1', 'una canción'); 
     } 
     // If the parent scope has a 'playlist' add all of it's songs 
     else if($scope.playlist){ 
     toAdd = $scope.playlist.songs; 
     msg = msg.replace('$1', $scope.playlist.songs.length+' canciones'); 
     } 
     // If the parent scope has a 'queue' add all of it's songs 
     else if($scope.queue){ 
     toAdd = $scope.queue.songs; 
     msg = msg.replace('$1', $scope.queue.songs.length+' canciones'); 
     } 

     $scope.loading = true; 
     playlist.addSongs(toAdd, playlist.id, false, function(err){ 
     $scope.loading = false; 
     //HERE playlist has the correct number of songs! So it worked! 
     if($scope.item) $scope.unflip(); // if parent scope is a single song. 
     $scope.close(); 
     if (err) { 
      return MessageService.show(err); 
     } 
     MessageService.show(msg); 
     }); 
    }; 

ポップオーバーのHTMLは:

<ion-scroll> 
    <h3 on-tap="newPlaylist()"><img src="/img/icon-round-add.png"/> <span>Crear Nueva Lista de Reproducción</h3> 
    <div class="spinner-container" ng-show="loading"><ion-spinner></ion-spinner></div> 
    <br/> 
    <h3 class="playlist" ng-repeat="playlist in playlists" on-tap="add(playlist)"><img ng-src="{{playlist.client_data.icon_url}}"/> <span>{{playlist.name}}</span></h3> 
    </ion-scroll> 

答えて

関連する問題