È possibile intercettare l'oggetto evento corrente in ng-click come gestori utilizzando la proprietà $event.ottiene l'elemento corrente
Ma è possibile ottenere l'elemento da cui è stato chiamato il metodo?
come ad esempio:
<div ng-controller='myController'>
<div>{{distortThatDiv($element)}}</div>
</div>
Con una direttiva in angolare è facile accedere all'elemento. Basta usare il collegamento funzione:
angular.module('myModule', [], function ($compileProvider) {
$compileProvider.directive('distortThatDiv', function distortThatDivDirective() {
return {
restrict: 'A',
link : function (scope, element, attrs) {
element.on('click', function() {
// do something
});
}
};
});
});
codice HTML sarebbe:
<div ng-controller='myController'>
<a distort-that-div>My link</a>
</div>
Si noti inoltre che se la propria direttiva restituisce solo una funzione, allora Angular assumerà che è la funzione 'link'. –
Se avete intenzione di manipolare il DOM, si dovrebbe utilizzare una direttiva. Tuttavia, se avete la $event, si può facilmente get the raw element the event was triggered on:
$scope.clickHandler = function($event) {
var element = $event.target;
};
ma non sto usando $ event ... quindi non c'è modo di ottenere l'elemento stesso? – Agzam
Non che io sappia. Tuttavia, poiché l'elemento è collegato all'evento, perché non usi '$ event'? (Il tuo esempio usa '$ element', basta cambiarlo in' $ event' e aggiungere una riga al gestore dei clic). –
Ecco un'altra alternativa (non so se questa è una buona pratica, però):
Nel modello :
<div data-ng-click="foo()">Lorem ipsum</div>
Nel controller:
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';
}
}]);
Sono davvero curioso di quel div che stai distorcendo ... –