Materiale angolare - Aggiungere dinamicamente scheda e passare a quella scheda

Question

Attualmente si sta lavorando su un'app di chat qui https://playwithfire.firebaseapp.com/ e ogni volta che un utente aggiunge una nuova stanza, desidero inserire la nuova scheda della camera. Attualmente è possibile aggiungere una stanza ma è necessario fare clic in seguito per entrare in quella stanza e visualizzarne il contenuto.

Ho provato a modificare l'attributo md-selected = "selectedIndex" ma non rende attiva alcuna scheda in modo che non venga visualizzato alcun contenuto.

È possibile fare ciò che sto chiedendo? Quello che ho finora:

index.html

<div layout="column" ng-controller="RoomController"> 
     <!-- Tabs Container --> 
     <md-tabs md-stretch-tabs md-selected="selectedIndex"> 
      <!-- Individual Tab --> 
      <md-tab ng-repeat="room in roomList" 
        label="{{room.roomName}}"> 

       <div ng-controller="ChatController"> 
        <!-- Display messages --> 
        <md-list> 
         <md-item ng-repeat="msg in messages"> 
          <md-item-content> 
           <div class="md-tile-content"> 
            <div class="bubble"> 
             <strong>{{msg.from}}</strong><br> 
             {{msg.body}} 
            </div> 
           </div> 
          </md-item-content> 
         </md-item> 
        </md-list><!--/DisplayMessages--> 

        <!-- Chat controls --> 
        <div layout="row" layout-margin layout-wrap> 
         <div flex="33"> 
          <!-- Assign username --> 
          <label for="nameInput">Username</label> 
          <input ng-model="name" type="text" id="nameInput" placeholder="Enter a username..."> 
         </div> 
         <div flex="95"> 
          <!-- Post a message --> 
          <label>Message</label> 
          <textarea class="form-control" 
             ng-model="msg" 
             ng-keydown="addMessage($event)" 
             id="messageInput" 
             placeholder="Type a message..."> 
          </textarea> 
         </div> 

         <div layout="row" layout-sm="column" layout-margin layout-fill layout-align="start end"> 
          <!-- Click to send message --> 
          <div flex> 
           <md-button class="md-raised md-primary pull-left" ng-click="sendMessage()">Send</md-button> 
          </div> 
          <!-- Modal to add or join room --> 
          <div flex ng-controller="ModalController"> 
           <md-button class="md-raised md-primary pull-left" ng-click="open()">Add or Join Room</md-button> 
          </div> 
          <!-- Opens helper --> 
          <div flex ng-controller="HelpController"> 
           <md-button class="pull-right" ng-click="open()" ng-href="">Need help?</md-button> 
          </div> 
         </div> 
       </div><!--/ChatController--> 
      </md-tab> 
     </md-tabs><!--/tabs container--> 
    </div><!--/RoomController--> 

room.js

angular.module('myApp') 
.controller('RoomController', function($scope, ShareFactory) { 
    $scope.roomList = ShareFactory.roomList; 

    // use this to default to index 0 in roomList 
    $scope.selectedIndex = 0; 

    $scope.$on('RoomChange', function(event, data) { 
     $scope.selectedIndex = data; 
     console.log('Heard the change!'); 
     console.log('The data is: ' + data); 
    }); 
}); 

modal.js

angular.module('myApp') 
.controller('ModalController', function($rootScope, $scope, $modal, ChatFactory, ShareFactory) { 
    $scope.open = function() { 
     var modalInstance = $modal.open({ 
      templateUrl: 'views/modal.html', 
      controller: 'ModalInstanceController' 
     }); 

     modalInstance.result.then(function (name) { 
      var found = false; 
      var length = ShareFactory.roomList.length; 
      var index = 0; 

      for(var i = 0; i < length; ++i) { 
       if(ShareFactory.roomList[i].roomName === name) { 
        found = true; 
        index = i; 
        console.log('index ' + index); 
       } 
      } 

      if(!found) { 
       ShareFactory.roomList.push({ roomName : name}); 
       index = ShareFactory.roomList.length - 1; 
      } 
      else { 
       // don't care about disabled, not a feature i want to use 
       //ShareFactory.roomList[index].disabled = false; 
      } 

      // Broadcast event to all children of rootScope 
      // namely want RoomController to listen for this change 
      $rootScope.$broadcast('RoomChange', index); 
     }, function() { 
      console.log('cancel'); 
     }); 
    }; 
}); 

Answer 1

Ya sa, questo sicuramente è venuto in un problema con Github qualche tempo fa, ma potrebbe essere stato respinto a causa di altri problemi con priorità elevata.

Ho appena aggiunto questa funzionalità da padroneggiare: https://github.com/angular/material/commit/8285e2d0bb6efbc72e311ee85b619cbbe8437072

e dovrebbe essere visibile a breve sul nostro sito nel secondo demo: https://material.angularjs.org/HEAD/#/demo/material.components.tabs

Nel frattempo, si dovrebbe essere in grado di risolvere questo problema aggiungendo il seguente codice:

if(!found) { 
    ShareFactory.roomList.push({ roomName : name}); 
    index = ShareFactory.roomList.length - 1; 
    $timeout(function() { 
    ShareFactory.selectedIndex = index; 
    }); 
} 

il $timeout è necessario perché è necessario attendere fino a dopo il render è finito prima di c un aggiornamento l'indice selezionato a quello nuovo - altrimenti, penserà che il valido è fuori portata.

Spero che questo aiuti!