Pobierz bieżący element

Question

Możliwe jest przechwycenie bieżącego obiektu zdarzenia w ng-click, np. Procedur obsługi za pomocą właściwości $event.

Ale czy można uzyskać element, z którego wywołano metodę?

jak na przykład:

<div ng-controller='myController'> 
    <div>{{distortThatDiv($element)}}</div> 
</div> 

Answer 1

Z dyrektywy w kanciasty łatwo jest uzyskać dostęp do elementu. Wystarczy użyć łącza funkcję:

angular.module('myModule', [], function ($compileProvider) { 
    $compileProvider.directive('distortThatDiv', function distortThatDivDirective() { 
     return { 
      restrict: 'A', 
      link : function (scope, element, attrs) { 
       element.on('click', function() { 
       // do something 
       }); 
      } 
     }; 
    }); 
}); 

HTML byłoby:

<div ng-controller='myController'> 
    <a distort-that-div>My link</a> 
</div> 

Answer 2

Jeśli masz zamiar manipulować DOM, to naprawdę powinien być za pomocą dyrektywy. Jednakże, jeśli masz $event można get the raw element the event was triggered on łatwo:

$scope.clickHandler = function($event) { 
    var element = $event.target; 
}; 

Answer 3

Oto kolejna alternatywa (nie wiem, czy jest to dobra praktyka, choć):

W szablonie :

<div data-ng-click="foo()">Lorem ipsum</div> 

W kontrolerze:

angular.module('fooApp') 
.controller('FooController', ['$scope', '$window', '$log', function FooController ($scope, $window, $log) { 
    $scope.foo = function foo() { 
     $log.info($window.currentTarget.innerHTML); // Outputs 'Lorem Ipsum'; 
    } 
}]);