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 は常に子を送信するので、テーブル行に移動して行にクラスを設定します。

これを行うためのよりクリーンな方法があるかどうか、実際にAngularがこれらの状況で使用する「this」参照があり、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 に答える