通过使用$event
属性,可以像处理程序一样拦截ng-click
中的当前事件对象。获取当前元素
但是有可能从中调用该方法的元素?
例如像:
<div ng-controller='myController'>
<div>{{distortThatDiv($element)}}</div>
</div>
通过使用$event
属性,可以像处理程序一样拦截ng-click
中的当前事件对象。获取当前元素
但是有可能从中调用该方法的元素?
例如像:
<div ng-controller='myController'>
<div>{{distortThatDiv($element)}}</div>
</div>
随着指令的角度很容易访问的元素。只需使用链接功能:
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是:
<div ng-controller='myController'>
<a distort-that-div>My link</a>
</div>
还要注意,如果你的指令只返回一个函数,那么Angular会认为它是'link'函数。 –
如果你要操作DOM,你真的应该使用一个指令。但是,如果你有$event
,你可以很容易地get the raw element the event was triggered on:
$scope.clickHandler = function($event) {
var element = $event.target;
};
但我没有使用$ event ...所以没有办法获取元素本身? – Agzam
不是我所知道的。但是,由于该元素被附加到事件中,为什么不使用'$ event'? (你的例子使用'$ element',把它改为'$ event'并在click处理程序中添加一行)。 –
这里的另一种选择(不知道这是一个很好的做法,虽然):
在模板:
<div data-ng-click="foo()">Lorem ipsum</div>
在您的控制器中:
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';
}
}]);
我真的很好奇你是否扭曲的div ...... –