angularjs - 获取当前元素

Question

ng-click可以通过使用$event属性在类似的处理程序中拦截当前事件对象。

但是是否有可能获取调用该方法的元素？

例如：

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

Answer 1

如果你要操作 DOM，你真的应该使用指令。但是，如果您有$event，则可以轻松获取触发事件的原始元素：

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

Answer 2

使用角度指令可以轻松访问元素。只需使用链接功能：

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>

Answer 3

这是另一种选择（但不确定这是否是一个好习惯）：

在您的模板中：

<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';
    }
}]);