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 position my popup close to element that initiated the open.

What is best way to make this? Would capturing the initiator with ng-click="open($event)" and passing to directive work? (here is sample of this element capturing http://jsfiddle.net/Amnesiac/5z5Qz/3/ )

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

How do I then pass this angular.element(e.srcElement) to directive ? (directive would then do some calculations based on position of that passed dom element and re-position the popup)

Answer 1

Pass it like you would any other scope property, e.g., 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