Question

我是Angular 1.0的新手，我来自jQuery背景。

我们说我有以下HTML：

<div id="filters">
    <div id="filter1">Filter 1</div>
    <div id="filter2">Filter 2</div>
    <div id="filter3">Filter 3</div>
    <div id="filter4">Filter 4</div>
</div>

现在我想要一个函数，它将返回被点击的子元素的id。什么是最好地实现以下jQuery代码的Angular方法：

$('#filters div').on('click', function() {
  alert($(this).attr("id"));
});

Answer 1

最简单的方法是使用ng-repeat创建一个数组并通过DOM循环它然后你可以将对象作为参数传递给click函数并获取id

<div id="filters">
    <div ng-click="check(item)" ng-repeat="item in arr" id="{{item.id}}">{{item.name}}</div> 
</div>

示例数组

[{"name":"Filter 1","id":"filter1"},{"name":"Filter 2","id":"filter2"},{"name":"Filter 3","id":"filter3"},{"name":"Filter 4","id":"filter4"}]

如果您不想使用ng repeat，我建议将$event.target作为参数传递给click事件

<div id="filters">
    <div id="filter1" ng-click="getID($event.target)">Filter 1</div>
    <div id="filter2" ng-click="getID($event.target)">Filter 2</div>
    <div id="filter3" ng-click="getID($event.target)">Filter 3</div>
    <div id="filter4" ng-click="getID($event.target)">Filter 4</div>
</div>

功能

$scope.getID = function(item){
   console.log(item.id)
};

演示

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.arr = [{"name":"Filter 1","id":"filter1"},{"name":"Filter 2","id":"filter2"},{"name":"Filter 3","id":"filter3"},{"name":"Filter 4","id":"filter4"}]


$scope.check = function(item){ 
    console.log(item.id)
}

$scope.getID = function(item)
{
    console.log(item.id)
};
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

<p> using ng repeat </p>
 <div id="filters">
    <div ng-click="check(item)" ng-repeat="item in arr" id="{{item.id}}">{{item.name}}</div> 
</div>
<br>

<p> using $event </p>
<div id="filters">
    <div id="filter1" ng-click="getID($event.target)">Filter 1</div>
    <div id="filter2" ng-click="getID($event.target)">Filter 2</div>
    <div id="filter3" ng-click="getID($event.target)">Filter 3</div>
    <div id="filter4" ng-click="getID($event.target)">Filter 4</div>
</div>

</div>

Answer 2

您可以创建一个附加到父级的指令，该指令可以绑定到所有子级的onClick事件。

function getChildrenid() {
  return {
    restrict: 'A',
    link: function(scope, element, attributes) {
      var children = element[0].querySelectorAll('div'); //get all child div's
      angular.forEach(children, function(child) { //loop over all the child
        var ngElement = angular.element(child); //create an angular element of the child
        ngElement.on('click', function() { //bind to the click event
          console.log(ngElement.attr('id'));
        });
      });
    }
  };
}

function MainController() {
  //
}

angular.module('app', []);
angular.module('app')
  .controller('MainController', MainController)
  .directive('getChildrenid', getChildrenid);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainController as ctrl">
    <div id="filters" get-childrenid>
        <div id="filter1">Filter 1</div>
        <div id="filter2">Filter 2</div>
        <div id="filter3">Filter 3</div>
        <div id="filter4">Filter 4</div>
    </div>
  </div>
</div>

您可以使用ngRepeat渲染子项而不是单独列出它们，也可以使用重复的子项来添加ngClick。

您可以单独为每个子元素添加ngClick。

Answer 3

在角度中，当您单击某个元素时，您将获得一个事件对象。

此对象具有 toElement 属性，该属性为您提供接收事件的元素。然后，您只需使用 toElement.id 即可显示ID：

＆＃13;

function MyController() {
  this.getId = function(event) {
    console.log(event.toElement.id);
  }
}

angular.module('app', []);
angular.module('app')
    .controller('MyController', MyController);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MyController as ctrl">
    <div id="filters" ng-click="ctrl.getId($event)">
        <div id="filter1">Filter 1</div>
        <div id="filter2">Filter 2</div>
        <div id="filter3">Filter 3</div>
        <div id="filter4">Filter 4</div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

在你的angularJs控制器中定义一个获取事件的函数，并在div上指定ng-click指令，如

<div id="filters">
    <div id="filter1" data-ng-click="ShowId($event)">Filter 1</div>
    <div id="filter2" data-ng-click="ShowId($event)">Filter 2</div>
    <div id="filter3" data-ng-click="ShowId($event)">Filter 3</div>
    <div id="filter4" data-ng-click="ShowId($event)">Filter 4</div>
</div>

控制器：

$scope.ShowId = function(event)
{
   alert(event.target.id);
};

Answer 5

在您的父directive上创建一个客户div。该指令将允许您访问DOM元素。建议angular方式访问DOM元素。

Answer 6

您可以使用ng-click指令传递事件。喜欢这个

<div id="filters" ng-click="myFunction($event)">
   <div id="filter1">Filter 1</div>
   <div id="filter2">Filter 2</div>
   <div id="filter3">Filter 3</div>
   <div id="filter4">Filter 4</div>
</div>

Answer 7

这是最小化方法，其中ID直接从HTML模板传递。这样，您可以保持控制器尽可能干净，并且您不需要创建任何其他指令。

＆＃13;

{{1}}

＆＃13;

如果孩子被点击则捕获Id的角度方式

7 个答案: