单击时AngularJS高亮显示锚标记 [英] AngularJS Highlight anchor tag when click

问题描述

嘿，我正在与Angular建立聊天，其一个视图包含可用用户列表(chat.html)，另一个视图包含聊天消息(chatMessages.html).当我单击用户列表时，将显示他的聊天记录，并且我想更改用户背景以显示这是当前打开的聊天记录.

Hey I'm developing a chat with Angular and have one view that contains the list of available users (chat.html) and another view which contains the chat messages (chatMessages.html). When I click on the user list his chat is displayed and I want to change the background of the user in order to show that is the current open chat.

我尝试从此问题中使用 answer ，但是当我单击鼠标时，聊天不会出现，并且许多评论者都不建议在样式内调用函数.

I tried using the answer from this question but when I make a click the chat is not appearing and calling a function inside the style is not recommended by many of the commenters.

任何帮助将不胜感激

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，里面有我的状态

This is my app.js where I have my states

.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();
        }]
    }
});

推荐答案

您可以在此处使用 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>

您可以将 new-background 类添加到CSS

And you can add a new-background class to your css

这篇关于单击时AngularJS高亮显示锚标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！