Pass element to Angular directive

Question

I have a simple popup directive similar to https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js

I need to place a popup next to the element that triggered the opening.

What is the best way to do this? Would you grab the initiator with ng-click = "open ($ event)" and move on to directive work? (here a sample of this element captures http://jsfiddle.net/Amnesiac/5z5Qz/3/ )

$scope.open= function (e) { var elem = angular.element(e.srcElement); } 

How to pass this angular.element (e.srcElement) directive? (the directive will then do some calculations based on the position of this passed dom element and reposition the popup)

Answer 1

Pass it, like any other property of the scope, for example modal el="clickedElement" :

 <button id="myId" ng-class="{'blueBg': blueBg}" ng-click="hi($event)">click me</button> <div modal el="clickedElement"></div> 

 angular.module('Test',[]) .controller('Foo', function ($scope, $element) { $scope.blueBg = false; $scope.hi = function (ev) { $scope.blueBg = true; $scope.clickedElement = angular.element(ev.srcElement); } }) .directive('modal', function() { return { link: function(scope, element, attrs) { scope.$watch(attrs.el, function(value) { if(value !== undefined) { console.log('element=',value); ... 

fiddle