AngularJS Highlight anchor tag when click

问题

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.

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.

Any help would be appreciated

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

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

回答1:

You can use ng-class here

<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>

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

回答2:

Set a highlight property on ng-click and use that with the ng-class directive:

<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>

来源：https://stackoverflow.com/questions/50728027/angularjs-highlight-anchor-tag-when-click

标签

javascript

html

angularjs