I have a simple popup directive similar to .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 / )

$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)

I have a simple popup directive similar to https://github./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/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)

• javascript
• angularjs

• I think you want to bind a controller within the directive so you can control the scope of your functions. – Dan Kanze Commented Aug 6, 2013 at 23:03

1 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