Javascript 在自定义指令ng repeater中引发ng click的元素是什么

我在一个指令中有一个中继器，它可以吐出表中的行

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

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

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

.directive（'userList'，function（）{
返回{
限制：“A”，
模板：“”+
''+
“用户名”+
“名字”+
“姓”+
“电子邮件地址”+
''+
''+
“{{user.UserName}}”+
“{user.FirstName}”+
“{user.LastName}}”+
“{{user.Email}}”+
''+
'',
范围：{
selectedUser:“=”，
用户：'='
},
链接：功能（范围、要素、属性）{
scope.selectUser=函数（用户、事件）{
$（“div[用户列表]tr.ts-li-selected”）.removeClass（“ts-li-selected”）；
$（event.target）.closest（“tr”）.addClass（“ts li selected”）；
scope.selectedUser=user；
};
scope.overUser=函数（事件）{
$（“div[用户列表]tr.ts-li-over”）.removeClass（“ts-li-over”）；
$（event.target）.最近的（“tr”）.addClass（“ts li over”）；
};
scope.leaveUser=函数（事件）{
$（“div[用户列表]tr.ts-li-over”）.removeClass（“ts-li-over”）；
};
}
}
});

我注意到，

这个

似乎没有引用引发事件的元素，就像我在纯java或jQuery中所做的那样。相反，我将事件发送到了我的函数event.target始终发送子对象，因此我转到表行，在该行上设置类

---

我想知道是否有一个更干净的方法来做这件事，如果真的有一个“这个”在我可以调用而不是遍历DOM树的情况下，angular将使用的引用。

参数'elem'在设置该指令的情况下获得JQuery元素。

参数'elem'在设置该指令的情况下获得JQuery元素。

您可以使用

ng class

指令将特殊类添加到单击的

。只要浏览一下代码，就好像您正在设置

范围。单击任何
时，请选择“用户”。因此，您应该能够执行以下操作：

在模板中：

...
'<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>'+
...

希望有帮助

另外，对于您的
mouseover
和
mouseleave
类，您不能在css样式表中添加如下内容吗

tr:hover{ /* special styles here */ }
tr.ts-li-selected:hover{ /* don't do special styles here */ }

您可以使用
ng class
指令将特殊类添加到单击的
。只要浏览一下代码，就好像您正在设置
范围。单击任何
时，请选择“用户”。因此，您应该能够执行以下操作：

在模板中：

...
'<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>'+
...

希望有帮助

另外，对于您的
mouseover
和
mouseleave
类，您不能在css样式表中添加如下内容吗

tr:hover{ /* special styles here */ }
tr.ts-li-selected:hover{ /* don't do special styles here */ }

工作小提琴：

你可以这么简单

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

工作小提琴：

你可以这么简单

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

不是他要求的。指令设定在一个div上，那不会给我我想要的。不是他要求的。指令设定在一个div上，那不会给我我想要的。那太圆滑了！我希望我能给你更多的好处。对于你的代码，我只需要做一个修复：ng类中的撇号必须被转义，在那之后，它工作得很好。这是非常巧妙的！我希望我能给你更多的好处。我只需要对您的代码进行一次修复：ng类中的撇号必须转义，之后效果很好。嗯，我想知道您是否可以为该指令的模板引用url。这可以让事情变得更简单，嗯，我想知道你是否可以为指令的模板引用一个url。这可能会让事情变得更容易