Question

在下面的代码中，我试图将表格单元格（作为DOM对象）传递给函数，但this并不意味着表格单元格的DOM对象，它似乎是是指$scope。知道怎么做吗？

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr >
    <td ng-click="dum();">ONE</td>
    <td>TWO</td>
  </tr>
  <tr ng-repeat="x in names">
    <td ng-click="dum(this);">{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
obj1 = "haha";
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function (response) {$scope.names = response.records;});
    $scope.dum = function(x) { obj1 = x; console.log(x); }
});

</script>

</body>
</html>

Answer 1

你可能会这样做：

在您的HTML中

<td ng-click="dum($event);">{{ x.Name }}</td>

在您的Javascript中

$scope.dum = function(e) { obj1 = e.target; console.log(x); }
//e.target will be the clicked element.

Answer 2

我不建议从控制器访问DOM，但您可以使用$ event.target。这是一个更好的例子：http://plnkr.co/edit/wFdnPJVa7BHOcvkPqNNT?p=preview

angular.module('Test', [])
.controller('testCtrl', ['$scope', function($scope)
{
  $scope.myFunc = function(e)
  {
    console.dir(e.target);
  }
}]);

和HTML

<body ng-app="Test">
  <div ng-controller="testCtrl">
    <button ng-click="myFunc($event)">Click Me</button>
  </div>
</body>

Answer 3

在角度中，您应始终对数据进行编码。除了极端边缘情况之外，在所有情况下都不需要对DOM进行编码，并且在必要时，通常最好在指令中完成，您可以在其中控制角度应用程序的其余部分的更新。

在您的情况下，您不需要访问DOM，元素甚至事件。您已经掌握了使用数据处理代码所需的所有信息。

<tr ng-repeat="x in names">
    <td ng-click="dum(x);">{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
</tr>

并在控制器中：

$scope.dum = function(x) { console.log(x); }

将dom对象传递给angularjs

3 个答案: