angular：当另一个控制器中的数据发生更改时，视图未更新

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.

UserPlaylists的视图和控制器。
a ionic popover for assigning a song to a UserPlaylist.

用于将歌曲分配给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.

它应该像这样工作:我查看预定义播放列表中的歌曲。我选择要添加到UserPlaylist的歌曲。弹出窗口出现,允许选择UserPlaylist来添加歌曲。我选择它并将歌曲添加到UserPlaylist。该应用程序仍保留在预定义的播放列表视图中。

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...

一切正常。当我使用新歌切换回用户播放列表时,用户播放列表的视图不会更新 - 我需要重新加载UserPlaylist视图,然后我可以看到添加的新歌...

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

我不能使用$ apply(),它总是告诉我它已经在进行中。离子或角度是以某种方式缓存的东西?

The playlist html

播放列表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:

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

the popover add code:

popover添加代码:

 $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:

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 个解决方案

#1

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

我通过阅读这个来修复:http://ionicframework.com/docs/api/directive/ionView/

and putting

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

at the UserPlaylist view

在UserPlaylist视图中

#1