2012-12-11 178 views
6

通過使用$event屬性,可以像處理程序一樣攔截ng-click中的當前事件對象。獲取當前元素

但是有可能從中調用該方法的元素?

例如像:

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

我真的很好奇你是否扭曲的div ...... –

回答

3

隨着指令的角度很容易訪問的元素。只需使用鏈接功能:

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> 
+1

還要注意,如果你的指令只返回一個函數,那麼Angular會認爲它是'link'函數。 –

5

如果你要操作DOM,你真的應該使用一個指令。但是,如果你有$event,你可以很容易地get the raw element the event was triggered on

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

但我沒有使用$ event ...所以沒有辦法獲取元素本身? – Agzam

+0

不是我所知道的。但是,由於該元素被附加到事件中,爲什麼不使用'$ event'? (你的例子使用'$ element',把它改爲'$ event'並在click處理程序中添加一行)。 –

2

這裏的另一種選擇(不知道這是一個很好的做法,雖然):

在模板:

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