javascript - 单击时 AngularJS 突出显示 anchor 标记

Question

嘿，我正在使用 Angular 开发聊天功能，其中一个 View 包含可用用户列表 (chat.html)，另一个 View 包含聊天消息 (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>

聊天 Controller

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>

聊天消息 Controller

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

Answer 1

在 ng-click 上设置一个 highlight 属性，并将其与 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>