基本的には単純ですが、動作させることはできません。angle:別のコントローラでデータが変更されたときにビューが更新されない
注:ionicを使用します。
私は:
予め定義されたプレイリスト
UserPlaylistsためのビューとコントローラのビューおよびコントローラ。
UserPlaylistに曲を割り当てるイオンポップオーバー。
これは次のように動作します: 私はあらかじめ定義されたプレイリストの曲を見る。私は、UserPlaylistに追加する曲を選択します。 Popoverが表示され、UserPlaylistを選択して曲を追加することができます。私はそれを選択し、曲はUserPlaylistに追加されます。アプリは、定義済みプレイリストビューののままです。
すべて動作します。私は新しい歌でそれに切り替えるときUserPlaylistが更新されないとビューを除く- 私はUserPlaylistビューをリロードする必要があり、その後、私は新しい曲が追加さ見ることができます...
私はできませんでした$ apply()を使用すると、それはすでに処理中であると私に伝えられますか?イオンや角が何とかキャッシングするのですか?
プレイリストのHTML
<div ng-hide="loading">
<h2>{{playlist.name}}
<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>