передать объект dom в функцию обработки в angularjs

0

В следующем коде я пытаюсь передать ячейку таблицы (как объект 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>
  • 1
    Вы не должны (должны) играть с DOM, когда используете angular, особенно когда делаете самые обычные вещи. Это то, что угловые абстрагируется через директивы. Если вам вообще нужно, вы делаете это в директиве. Но для того, что вы делаете здесь, понятия не имею, зачем вам этот элемент там. this область, потому что область имеет свойство под названием this которое указывает на себя
  • 0
    не играй с домом ... ты не используешь угловой как должно быть
Показать ещё 8 комментариев
Теги:

3 ответа

1
Лучший ответ

В угловом коде вы всегда должны кодировать свои данные. Кодирование с 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); }
  • 0
    Хорошо сказано. Благодарю.
  • 0
    @codingFun - это один из самых хитрых аспектов angular, к которому нужно привыкнуть, но как только вы поймете идею двухстороннего связывания, он откроет совершенно новую оценку самой фреймворка и даст вам новый взгляд на то, что возможно в среде браузера.
Показать ещё 2 комментария
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.
  • 0
    Спасибо @mindastic! Оно работает. Я приму это через 7 минут из-за правила ТАК.
  • 0
    @minidastic, Просто понял, что лучший способ - не читать элемент DOM, чтобы получить данные, необходимые для обработки. Я думаю, что ваш ответ - это хороший трюк, так как $event может содержать что-то еще полезное (например, положение нажатия).
Показать ещё 1 комментарий
1

Я бы не рекомендовал обращаться к DOM с контроллера, но вы можете использовать $ event.target. Здесь пример plunker: 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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню