imposta l'altezza di un div a un altro div in angularjs

Question

io sono nuovo di angolare :-) voglio semplicemente impostare le dimensioni di un div a altro, ogni aiuto apprezzato.

<div class="front"> 
    <img ng-src="{[galery.pages[0].thumbnailUrl]}" > 
</div> 
<div ng-style="galery.pages[1] ? '' : setBackDimensions(); " ></div> 

e nel controller ho aggiunto:

$scope.setBackDimensions = function() { 
     var imgHeight = $(".front").height; 
     var imgWidth = $(".front").width; 
     return { 
      'width': imgWidth + 'px'; 
      'height': imgHeight + 'px'; 
     } 
    }; 

e sta tornando larghezza e l'altezza, ma non vengono applicate

Answer 1

ho creato una soluzione per il vostro problema. Per prima cosa ti spiegherò cosa ho fatto e perché l'ho fatto in questo modo.

Una linea guida di base in Angular è che si dovrebbe evitare di gestire elementi DOM come i div nei controller e invece fare la maggior parte delle cose relative agli elementi DOM nelle direttive.

Le direttive consentono di associare le funzioni a elementi dom specifici. In questo caso si desidera associare una funzione al primo div, che ottiene l'altezza e la larghezza del proprio elemento e lo espone a un altro elemento. Ho commentato il mio codice qui sotto per mostrare come ho raggiunto questo.

app.directive('master',function() { //declaration; identifier master 
    function link(scope, element, attrs) { //scope we are in, element we are bound to, attrs of that element 
     scope.$watch(function(){ //watch any changes to our element 
     scope.style = { //scope variable style, shared with our controller 
      height:element[0].offsetHeight+'px', //set the height in style to our elements height 
      width:element[0].offsetWidth+'px' //same with width 
      }; 
     }); 
    } 
     return { 
     restrict: 'AE', //describes how we can assign an element to our directive in this case like <div master></div 
     link: link // the function to link to our element 
     }; 
}); 

Ora il nostro stile variabile campo di applicazione dovrebbe contenere un oggetto con la larghezza e l'altezza correnti del nostro elemento "master", anche se la dimensione dei nostri cambiamenti di elementi master.

Avanti fino vogliamo applicare questo stile ad un altro elemento che possiamo ottenere in questo modo:

<span master class="a">{{content}}</span> 
<div class="b" ng-style="style"></div> 

Come si può vedere la durata di cui sopra è il nostro elemento principale nel div è la nostra "slave", che avrà sempre la stessa larghezza e altezza della sua padronanza. ng-style="style" significa che aggiungiamo lo stile css contenuto nella nostra variabile scope chiamata style allo span.

Spero che tu abbia capito perché e come sono arrivato a questa soluzione, here is a plnkr con una demo che mostra la mia soluzione in azione.

Answer 2

Ecco un esempio per applicare la larghezza di altri elementi all'elemento corrente.

larghezza dell'elemento che ha il nome di classe "contenitore" si applicherà a div utilizzando flexibleCss js angolare direttiva

<div flexible-width widthof="container"> 
</div> 

myApp.directive('flexibleWidth', function(){ 

    return function(scope, element, attr) { 
      var className = attr.widthof; 
      var classWidth = angular.element(document.querySelectorAll('.'+className)[0])[0].clientWidth; 
      element.css({ 
       width: classWidth+ 'px' 
      }); 
      }; 
    });