获取AngularJS中点击元素数据的值答案

【问题标题】：Get the value of the clicked element data in AngularJS获取AngularJS中点击元素数据的值
【发布时间】：2015-12-15 02:38:20
【问题描述】：

如何在Angularjs中获取html5data-attr的值，并在同一个类中点击同一个函数。

就像在 jquery 中一样，我们点击一些类元素并获取当前元素 data-num。

我必须以有角度的方式实现这一点。

如何获取多个类元素点击并获取当前数据值（$this）？

<html ng-app="myApp">
    <head></head>
    <body ng-controller="mainController">
        <div ng-click="clicked()" data-num="1" class="same white">White</div>
        <div ng-click="clicked()" data-num="2" class="same green">Green</div>
        <div ng-click="clicked()" data-num="3" class="same red">Red</div>
        <div ng-click="clicked()" data-num="4" class="same white">White</div>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script>
        var myApp = angular.module('myApp',[]);
        myApp.controller('mainController',function($scope){
        $scope.clicked = function(){
        var id = angular.element('.same').scope();
        console.log(id);
        };
        });
    </script>
</html>

【问题讨论】：

问你两个问题，jquery 是否包含在角度参考中？你也可以把javascript放在html之外吗？
不，我只是在演示我们可以在 jquery 中以这种方式做到这一点，我的问题是我们如何以角度方式实现这一点。
jquery 仅用于演示目的

标签： jquery angularjs html

【解决方案1】：

其必要在函数中传递事件

<div ng-click="clicked($event)" data-num="2" class="same green">Green</div>

在函数中获取$event.target，获取DOM的JQUery并捕获数据属性

$scope.clicked = function($event){
     var id = $($event.target).data('num');
     console.log(id);
};

解决方案：JS FIDDLE

无论如何，我建议你不要将数据存储在 HTML 中，而是使用你的 $scope：

考虑以下几点：

var app = angular.module('myApp',[]).controller('myController', function($scope)    {
  $scope.buttons = [
                    { num: 1, className: "class1", description: "desc 1" },
                    { num: 2, className: "class2", description: "desc 2" },
                    { num: 3, className: "class3", description: "desc 3" }
                   ];

  $scope.clicked = function(buttonNumber)
  {
    console.log(buttonNumber);
  }
})

HTML

<div ng-repeat="button in buttons" ng-click="clicked(button.num)" class="{{button.className}}">
    {{button.description}}
</div>

JS FIDDLE

【讨论】：

更新了 Angular.Element 以正确使用 JQuery...如果您不想使用 JQuery，可以尝试：target.attributes.data.num

【解决方案2】：

您不需要数据属性。

<div ng-click="clicked(1)" class="same white">White</div>
<div ng-click="clicked(2)" class="same green">Green</div>
<div ng-click="clicked(3)" class="same red">Red</div>
<div ng-click="clicked(4)" class="same white">White</div>


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

【讨论】：

我也看到了，但我猜他想访问 DOM 以在控制器内做任何事情
这不是正确的 Angular 方式。您无需触摸 dom 即可获取数据。
是的，以角度方式，您只能通过自己的指令“触摸 DOM”