Question

html代码

<div ng-click="sortOrder($event, 'fullName')" class="col-xs-2 sortable asc">
    <span>Name</span>
</div>

这里是js代码

$scope.sortOrder = function(event, name) {     
        var $elem = $(event.target);
        var c = $elem.hasClass('desc') ? 'asc' : 'desc';
        $elem.removeClass('asc desc').addClass(c);
    }

单击div，将其添加到内部跨度而不是div.col-xs-2

Answer 1

改为使用currentTarget：

var $elem = $(event.currentTarget);

当前目标是创建事件侦听器的元素，target是触发事件的元素。

这意味着，在您的情况下，如果您点击范围target将是跨度，如果您点击div target将是div。但在这两种情况下currentTarget都是div。

另一个简单的解决方案是使用ng-class代替。

HTML：

<div ng-click="changeSortOrder()" class="col-xs-2 sortable" ng-class="sortOrder">
  <span>Name</span>
</div>

JS：

$scope.sortOrder = 'asc';

$scope.changeSortOrder = function () {
  $scope.sortOrder = $scope.sortOrder === 'asc' ? 'desc' : 'asc';
};

演示：http://plnkr.co/edit/0zrk7YQ7RCEVbSEj3zSh?p=preview

将逻辑移至指令的示例：

JS：

app.directive('mySort', function () {

  return {
    scope: true,
    link: function (scope, element) {

      var defaultSortOrder = 'asc';
      element.addClass(defaultSortOrder);

      var changeSortOrder = function () {
        var newOrder = element.hasClass('asc') ? 'desc' : 'asc';
        element.removeClass('asc desc').addClass(newOrder);
      };

      element.on('click', changeSortOrder);

      scope.$on('$destroy', function () {
        element.off('click', changeSortOrder);
      });
    }
  }
});

HTML：

<div class="col-xs-2 sortable" my-sort>
  <span>Element 1</span>
</div>
<div class="col-xs-2 sortable" my-sort>
  <span>Element 2</span>
</div>
<div class="col-xs-2 sortable" my-sort>
  <span>Element 3</span>
</div>

演示：http://plnkr.co/edit/9bf8UG6eJGW5AtlxcSgm?p=preview

Answer 2

好吧，我不建议您通过控制器更改DOM元素，但如果您必须这样做（而不是指令，这将是首选），那么您需要获取div元素这样：

var $elem = $event.target.parentNode

在ng-click中获取错误的目标对象

2 个答案: