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