嘿我正在与Angular开发聊天,并且有一个包含可用用户列表的视图(chat.html)和另一个包含聊天消息的视图(chatMessages.html)。当我点击用户列表时,会显示他的聊天,我想更改用户的背景,以显示当前打开的聊天。
我尝试使用此问题中的answer,但是当我点击时,聊天没有出现,并且许多评论者不推荐在样式中调用函数。
任何帮助将不胜感激
chat.html
<div layout="row" class="main-chat-container" layout-wrap>
<div class="list-container" flex="30">
<div class="chat-header">
<h2>Lista de Chats</h2>
</div>
<div class="chats-list">
<div class="chats-header">
<p>Usuarios</p>
</div>
<div class="chats" ng-repeat="chat in chats">
<div class="email-container" ng-click="setUserData(chat)">
<a>{{chat.email}}</a>
</div>
</div>
</div>
</div>
<div class-"chat-container" flex="70">
<ui-view></ui-view>
</div>
chatController
app.controller('chatController', function (currentAuth, $scope, $firebaseArray, $firebaseObject) {
console.log("CHAT CONTROLLER");
console.log(currentAuth.uid);
$scope.chats;
$scope.getContactsList = function(){
var listRef = firebase.database().ref('Users').child(currentAuth.uid).child('contacts');
var listArray = $firebaseArray(listRef);
$scope.chats = listArray;
console.log(listArray);
}
$scope.test = function(fuid){
console.log(fuid);
}
$scope.getContactsList();
});
chatMessages.html
<simple-chat messages="messages"
local-user="you"
send-function="sendMessage"
send-button-text="Enviar"
show-user-avatar="false"
show-composer="true"
composer-placeholder-text="Escribe un mensaje"
></simple-chat>
chatMessagesController
app.controller('chatMessagesController', function (currentAuth, $scope,$rootScope, $firebaseArray,$firebaseObject) {
$scope.fuid = "";
$scope.userData = [];
$scope.messages;
$scope.you = {
userId: '1',
avatar: 'http://via.placeholder.com/100x60',
userName: 'STA'
};
console.log(currentAuth.uid);
$rootScope.setUserData = function(userData){
$scope.userData = userData;
var userMessagesRef = firebase.database().ref('User-messages').child(currentAuth.uid).child($scope.userData.$id);
$scope.messages = $firebaseArray(userMessagesRef)
console.log($scope.messages);
}
$scope.sendMessage = function(typedMessage){
// console.log(typedMessage);
// $scope.messages.push(typedMessage);
var msgsRef = firebase.database().ref('User-messages');
var messageKey = Date.now() + $scope.userData.$id;
var messageKeyFriend = Date.now() + currentAuth.uid;
if(typedMessage.text.length >0){
var postData = {
date: Date.now(),
text: typedMessage.text,
name: "STA",
senderId: currentAuth.uid,
status: "success",
type: "text",
uid: Date.now() + currentAuth.uid
}
var updates = {};
updates['/' +$scope.userData.$id+"/"+currentAuth.uid+"/"+messageKey] = postData;
updates['/' +currentAuth.uid+'/' + $scope.userData.$id+ "/" + messageKeyFriend] = postData;
msgsRef.update(updates).then(function(){
console.log("succeed");
}).catch(error);
$scope.messageForm.typedMessage.$setPristine();
$scope.messageForm.typedMessage.$setPristine(true);
$scope.typedMessage = '';
}
}});
这是我的app.js,我有我的状态
.state('app.dashboard.chat', {
abstract: true,
url: '/chat',
templateUrl: 'app/components/chat/sidebar/chat.html',
controller: 'chatController',
resolve: {
// controller will not be loaded until $requireSignIn resolves
// Auth refers to our $firebaseAuth wrapper in the factory below
"currentAuth": ["Auth", function (Auth) {
// $requireSignIn returns a promise so the resolve waits for it to complete
// If the promise is rejected, it will throw a $stateChangeError (see above)
return Auth.$requireSignIn();
}]
}
}).state('app.dashboard.chat.messages',{
url: '',
templateUrl: 'app/components/chat/messages/chatMessages.html',
controller: 'chatMessagesController',
resolve: {
// controller will not be loaded until $requireSignIn resolves
// Auth refers to our $firebaseAuth wrapper in the factory below
"currentAuth": ["Auth", function (Auth) {
// $requireSignIn returns a promise so the resolve waits for it to complete
// If the promise is rejected, it will throw a $stateChangeError (see above)
return Auth.$requireSignIn();
}]
}
});
答案 0 :(得分:1)
您可以在此使用ng-class
<div class="chats" ng-class="userData.email == chat.email ? 'new-background' : ''"
ng-repeat="chat in chats">
<div class="email-container" ng-click="setUserData(chat)">
<a>{{chat.email}}</a>
</div>
</div>
您可以在css中添加new-background
课程
答案 1 :(得分:1)
在highlight
上设置ng-click
属性,并将其与ng-class
指令一起使用:
<div class="chats" ng-repeat="chat in chats">
<div class="email-container"
ng-click="chat.highlight=true; setUserData(chat)">
<a ng-class="chat.highlight?'highlight':''">{{chat.email}}</a>
</div>
</div>