angularjs – Angular Material – 动态添加选项卡并更改为该选项卡

目前正在 https://playwithfire.firebaseapp.com/的聊天应用程序上工作,每当用户添加新房间时,我都希望输入新的房间选项卡.目前,您可以添加房间,但之后需要单击它才能进入该房间并显示其内容.

我尝试更改属性md-selected =“selectedIndex”,但没有激活标签,因此不显示任何内容.

有可能做我要求的事吗？到目前为止我得到了什么：

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

嗯知道,这肯定是前一段时间出现在Github问题上,但由于其他高优先级问题,它可能已被踢到积压.

我刚刚将此功能添加到掌握中：
https://github.com/angular/material/commit/8285e2d0bb6efbc72e311ee85b619cbbe8437072

它应该在我们的网站上很快就可以在第二个演示中看到：
https://material.angularjs.org/HEAD/#/demo/material.components.tabs

在此期间,您应该可以通过添加以下代码来解决此问题：

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

$timeout是必要的,因为您必须等到渲染完成之后才能将所选索引更新为新索引 – 否则,它会认为有效超出范围.

希望这可以帮助！