2013-08-06 45 views
7

Ho una semplice direttiva popup simile a https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.jselemento Pass direttiva angolare

ho bisogno di posizionare il mio pop-up vicino al elemento che ha avviato la aperta.

Qual è il modo migliore per farlo? Catturare l'iniziatore con ng-click = "open ($ event)" e passare al lavoro direttiva? (Qui è campione di questo elemento catturare http://jsfiddle.net/Amnesiac/5z5Qz/3/)

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

Come posso allora passare questo angular.element (e.srcElement), della direttiva? (Direttiva avrebbe poi fare qualche calcolo in base alla posizione di quel passato elemento dom e riposizionare il pop-up)

+0

penso che si desidera associare un controller all'interno della direttiva in modo yo puoi controllare l'ambito delle tue funzioni. –

risposta

8

passarlo come si farebbe con qualsiasi altra proprietà campo di applicazione, ad esempio, 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

+0

Come ottenere il valore della proprietà width da quel 'valore'? – dzolnjan

+0

@ dzolnjan, l'elemento DOM è disponibile come 'valore [0]', quindi la larghezza è disponibile come 'valore [0] .clientWidth'. –

+0

È ancora il modo migliore per farlo? – prasanthv

Problemi correlati