Question

我发布了我的html和指令代码。我有两个跨度，我附加ng-click。在ng-click我想检查其父项父项（.parent-portlet）的类，但到目前为止我所做的并不正常，因为所有父portlet都被选中而不是只选择当前的那个。

<div class="parent-portlet {{portlet.class}} {{portlet.class2}}" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
  <div class="portlet-titlebar" ng-click="toggleCollapsed($event)">
    <span class="remove" ng-click="removePortlet(portlet)">
     Remove
    </span>
    <span class="add-back" ng-click="addPortlet(portlet)">
     Add Back
    </span>
  </div>
</div>

这就是我在指令中所拥有的：

scope.removePortlet = function(portlet) {
  var port = $('.remove').parent().parent();
  port.addClass('removed');
  port.addClass('edit-portlet');
};

scope.addPortlet = function(portlet) {
  var port = $('.add-back').parent().parent();
  if (portlet.hasClass('removed')) {
    port.removeClass('removed');
    port.removeClass('edit-portlet');
  }
};

此代码的问题是var portlet 捕获所有portlet（父级），我想只捕获与click操作相关的那个。我怎样才能做到这一点？我试着把它传递给我的jquery select如下：

var portlet = $('.add-back', this).parent().parent();

但这不起作用。任何想法如何实现这一目标？

提前致谢。

Answer 1

您可以将$element注入您的控制器，然后将其用作$选择器的上下文。

angular.module('app', []).controller('ctrl', function($scope, $element) {
  $scope.addPortlet = function(portlet) {
    console.log($('.add-back', $element));
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div class="parent-portlet">
    <div class="portlet-titlebar" ng-click="toggleCollapsed($event)">
      <span class="remove" ng-click="removePortlet(portlet)">
       Remove
      </span>
      <span class="add-back" ng-click="addPortlet(portlet)">
       Add Back
      </span>
    </div>
  </div>
</div>

For more info about it

Answer 2

将$ event传递给ng-click，如下所示：

<span ng-click="removePortlet($event)"></span>

然后，只需修改你的代码：

scope.removePortlet = function(ev) {
  var port = $(ev.target).parent().parent();
  port.addClass('removed');
  port.addClass('edit-portlet');
};

scope.addPortlet = function(ev) {
  var port = $(ev.target).parent().parent();
  if ($(ev.target).hasClass('removed')) {
    port.removeClass('removed');
    port.removeClass('edit-portlet');
  }
};

抓住“事件的目标”将确保您只处理实际点击的项目。请注意，angular使用$ event将事件传递给函数。

我还会使用.closest（）将类修改行和目标特定父级（如果你曾经修改过DOM）结合起来进行清理：

scope.removePortlet = function(ev) {
  var port = $(ev.target).closest('.parent-portlet');
  port.addClass('removed, edit-portlet');
};

scope.addPortlet = function(ev) {
  var port = $(ev.target).closest('.parent-portlet');
  if (portlet.hasClass('removed')) {
    port.removeClass('removed, edit-portlet');
  }
};

Answer 3

请改用ng-class。以下是使用类更改背景颜色的示例：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.portlet = {
    classes: {
      "parent-portlet": true,
      "edit-portlet": false,
      "removed": false
    }
  }
  
  $scope.removePortlet = function(portlet) {
    portlet.classes.removed = true;
    portlet.classes["edit-portlet"] = true;
  };
  
  $scope.addPortlet = function(portlet) {
    portlet.classes.removed = false;
    portlet.classes["edit-portlet"] = false;
  };
});

/* Put your css in here */

.parent-portlet {
  background-color: #ccc;
  padding: 20px;
}

.parent-portlet.removed {
  background-color: #c00;
}

.parent-portlet button {
  padding: 10px;
  margin: 0 10px;
}

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>

</head>

<body ng-controller="MainCtrl">
  <div ng-class="portlet.classes">
    <div class="portlet-titlebar">
      <button class="remove" ng-click="removePortlet(portlet)">
        Remove
      </button>
      <button class="add-back" ng-click="addPortlet(portlet)">
        Add Back
      </button>
    </div>
  </div>
</body>

</html>

使用jQuery的AngularJS用于选择父元素

3 个答案: