目前正在
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://www.f2er.com/angularjs/240590.html我刚刚将此功能添加到掌握中:
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是必要的,因为您必须等到渲染完成之后才能将所选索引更新为新索引 – 否则,它会认为有效超出范围.
希望这可以帮助!