0

我在吐出表格行的指令中有一个中继器。

当用户单击一行时，我想突出显示该行。

我有一些有用的东西，我只是想知道是否有更好的方法：

.directive('userList', function(){
    return{
        restrict: 'A',
        template: '<table>'+
                    '<tr>'+
                        '<th>User Name</th>'+
                        '<th>First Name</th>'+
                        '<th>Last Name</th>'+
                        '<th>Email Address</th>'+
                    '</tr>'+
                    '<tr ng-repeat="user in users" ng-click="selectUser(user,$event)" ng-mouseenter="overUser($event)" ng-mouseleave="leaveUser($event)">'+
                        '<td ng-click="selectUser(user)">{{user.UserName}}</td>'+
                        '<td>{{user.FirstName}}</td>'+
                        '<td>{{user.LastName}}</td>'+
                        '<td>{{user.Email}}</td>'+
                    '</tr>'+
                '</table>',
        scope:{
                selectedUser: '=',
                users: '='
        },
        link: function (scope, elem, attrs){
            scope.selectUser = function(user,event){
                $("div[user-list] tr.ts-li-selected").removeClass("ts-li-selected");
                $(event.target).closest("tr").addClass("ts-li-selected");
                scope.selectedUser=user;
            };
            scope.overUser = function(event){
                $("div[user-list] tr.ts-li-over").removeClass("ts-li-over");
                $(event.target).closest("tr").addClass("ts-li-over");
            };
            scope.leaveUser = function(event){
                $("div[user-list] tr.ts-li-over").removeClass("ts-li-over");
            };
        }
    }
});

我注意到this似乎没有像我在直接的 java 或 jQuery 中那样引用引发事件的元素。而不是那样，我已经将事件发送到我的函数，event.target 总是发送孩子，所以我去表行设置行上的类。

我想知道是否有一种......更清洁的方式来执行此操作，如果实际上有一个“this”引用，Angular 将在这些情况下使用我可以调用而不是遍历 DOM 树。

4

3 回答 3

3

您可以使用该ng-class指令向<tr>单击的对象添加一个特殊类。只需看一下您的代码，您似乎正在设置单击scope.selectedUser任何代码的时间。<tr>因此，您应该能够执行以下操作：

在您的模板中：

...
'<tr ng-repeat="user in users" ng-click="selectUser(user)" ng-class="{'ts-li-selected': selectedUser.id == user.id}">'+
    '<td ng-click="selectUser(user)">{{user.UserName}}</td>'+
    '<td>{{user.FirstName}}</td>'+
    '<td>{{user.LastName}}</td>'+
    '<td>{{user.Email}}</td>'+
'</tr>'+
...

只要的 id 与该行的 匹配，就会ng-class自动将该ts-li-selected类应用于，如果该条件不再有效，则将删除该类。<tr>$scope.selectedUseruser.id

然后您的$scope.selectUser()功能可以简化为：

scope.selectUser = function(user){
    scope.selectedUser = user;
};

希望有帮助。

PS。至于你mouseover和mouseleave类，你不能在你的css样式表中添加类似下面的东西吗？

tr:hover{ /* special styles here */ }
tr.ts-li-selected:hover{ /* don't do special styles here */ }
于 2013-10-17T14:50:08.750 回答
1

工作小提琴：http: //jsfiddle.net/strajk/XAFmb/

你可以简化成这样的东西

<tr
    ng-repeat="user in users"
    ng-click="selectUser(user)"
    ng-mouseenter="hoverUser(user)"
    ng-class="{
        'ts-li-selected': selectedUser.id == user.id,
        'ts-li-hovered': hoveredUser.id == user.id   
    }"
>

并指示这样的事情：

.directive('userList', function(){
    return{
        restrict: 'A',
        templateUrl: 'userList.html' ,
        scope: {
                users: '='
        },
        controller: function($scope) {
            $scope.selectedUser = null;
            $scope.hoveredUser = null;

            $scope.selectUser = function(user) {
                $scope.selectedUser = user;
            }
            $scope.hoverUser = function(user) {
                $scope.hoveredUser = user;
            }

        }
    }
});
于 2013-10-17T15:27:10.170 回答
0

参数“elem”在设置指令时获取了 JQuery 元素。

于 2013-10-17T14:42:24.063 回答