0

Basically it's simple, but I can't make it work.

Note: using ionic.

I have:

  • a view and controller for pre-defined Playlists

  • a view and controller for UserPlaylists.

  • a ionic popover for assigning a song to a UserPlaylist.

It should work like this: I look at songs in the pre-defined Playlists. I choose a song to be added to a UserPlaylist. The popover appears, allowing to choose the UserPlaylist to add the song to. I select it and the song gets added to the UserPlaylist. The app remains in the pre-defined playlist view.

It all works. Except the view with the UserPlaylist does not get updated when I switch back to it with the new song - I need to RELOAD the UserPlaylist view, and then I can see the new song added...

I could NOT use $apply(), is it would always tell me it's already in process. Is ionic or angular somehow caching things?

The playlist 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>

The add to playlist code in the song directive

/**
   * 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();
    });
  }

the UserPlaylist code:

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

the popover add code:

 $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);
      }); 
    };  

the popover 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>

1 Answer 1

1

I fixed by reading this: http://ionicframework.com/docs/api/directive/ionView/

and putting

<ion-view cache-view="false">

at the UserPlaylist view

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.