angularjs 无法通过 jQuery 找到 "this"？

Question

比如我有两个按钮

  <button class="item" ng-click="clickFun(this)">ngClick</button>
  <button class="item" onClick="clickFun(this)">jQueryClick</button>

我试图访问两个按钮，它在 jQuery Click 中有效，但 ngClick 失败了。我从 ngClick 得到了“（空）”。

js代码：

var oneApp = angular.module('oneApp', [])
.controller('oneCtrl', function($scope) {
  console.log('running');
  $scope.clickFun = function(obj){
     console.log($(obj).text());
    //console.log($(obj).next('.next'));
    //console.log($(obj).next('.next').text());
  }
});

function clickFun(obj){
  console.log($(obj).text());
}

这是我的演示：http://codepen.io/dotku/pen/VjwEvR

Answer 1

您应该在调用 ng-click 函数时传递 $event 对象，这基本上会将当前事件对象传递给 clickFun，然后执行 event.target，这将指示当前上下文（ this) 内部控制器。

标记

<button class="item" ng-click="clickFun($event)">ngClick</button>

代码

$scope.clickFun = function(event){
   console.log($(event.target).text());
}

Working CodePen

Note: Playing with DOM inside controller isn't correct way in Angular

Answer 2

将 DOM 元素传递给回调函数不是 Angular 方式。这是 jQuery 方式。

在Angular中不需要传递一个DOM元素，因为Angular方式不是做DOM操作，而是模型操作；并且视图可以绑定到模型。

因此，在 Angular 中，您将传递对模型属性的引用，而不是 DOM 元素：

<button class="item" ng-click="clickFun(somethingToClickOn)">ngClick</button>

这会将 $scope.somethingToClickOn 传递给点击处理程序，通过点击按钮确定您想要 pass/manipulate 的字段。

Answer 3

我认为this在html中没有任何意义。您可以改为在函数中传递 $event 并使用 $($event.current).text() 代替：

<button class="item" ng-click="clickFun($event)">ngClick</button>

并在 JS 中写入：

 $scope.clickFun = function(event){
     console.log($(event.target).text());
  }

查看更新后的 codepen

Answer 4

您可以通过 $event

实现

 <button class="item"  ng-click='functionname($event)'>

此致，
Selvam.M

angularjs 无法通过 jQuery 找到 "this"？

angularjs can't find "this" by jQuery?

jquery

angularjs

events

angularjs-ng-click