Vật liệu góc - Tự động thêm tab và chuyển sang tab đó

Question

Hiện đang làm việc trên ứng dụng trò chuyện ở đây https://playwithfire.firebaseapp.com/ và bất cứ khi nào người dùng thêm phòng mới, tôi muốn tab phòng mới được nhập. Hiện tại bạn có thể thêm phòng nhưng cần phải nhấp vào nó sau đó để vào phòng đó và hiển thị nội dung của phòng.

Tôi đã thử thay đổi thuộc tính md-selected = "selectedIndex" nhưng điều đó không làm cho tab hoạt động để nội dung không xuất hiện.

Tôi có thể làm những gì tôi yêu cầu không? Những gì tôi đã có cho đến nay:

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 biết, điều này chắc chắn đã đưa ra trong một vấn đề Github một thời gian trước đây, nhưng nó có thể đã bị đá vào việc tồn đọng do các vấn đề ưu tiên cao khác.

Tôi chỉ cần thêm tính năng này để làm chủ: https://github.com/angular/material/commit/8285e2d0bb6efbc72e311ee85b619cbbe8437072

Và nó nên có thể xem ngay trên trang web của chúng tôi trong bản demo thứ hai: https://material.angularjs.org/HEAD/#/demo/material.components.tabs

Trong khi đó, bạn sẽ có thể giải quyết điều này bằng cách thêm mã sau đây:

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

$timeout là cần thiết vì bạn phải đợi cho đến khi kết thúc hiển thị trước khi bạn c cập nhật chỉ mục đã chọn sang chỉ mục mới - nếu không, nó sẽ cho rằng giá trị hợp lệ nằm ngoài phạm vi.

Hy vọng điều này sẽ hữu ích!