AngularJS with jQuery 用于选择父元素

我正在发布我的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(父级(，而我只想捕获与单击操作相关的组件。我怎样才能做到这一点？我试图将其传递给我的jquery选择，如下所示：

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

但这没有用。任何想法如何实现？

提前谢谢。

将

$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');
  }
};

您可以将

$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>

有关它的更多信息

改用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>

相关内容

最新更新

热门标签：