régler la hauteur d'un div à un autre div dans angularjs

je suis nouveau sur angulaire 🙂 je veux simplement définir les dimensions d'une div à l'autre, toute aide appréciée.

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

et dans le contrôleur, j'ai ajouté:

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

et il est de retour en largeur et en hauteur, mais elles ne sont pas appliquées

source d'informationauteur lesek

  1. 24

    J'ai créé une solution pour votre problème. Je vais d'abord vous expliquer ce que j'ai fait et pourquoi je l'ai fait de cette façon.

    Un guide de base Angulaire est, que vous devriez éviter de traiter avec des éléments du DOM comme des divs dans vos contrôleurs et au lieu de faire la plupart des choses liées à des éléments du DOM dans les directives.

    Directives vous permettent de lier des fonctions spécifiques d'éléments dom. Dans ce cas, vous voulez lier une fonction pour votre premier div, qui obtient la hauteur et la largeur de vos éléments et s'expose à un autre élément. J'ai commenté mon code ci-dessous pour montrer comment j'ai réalisé ce.

    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
      };
});

    Maintenant à notre portée variable de style devrait contenir un objet avec la largeur et la hauteur de notre "maître" de l'élément, même si la taille de notre maître, l'élément change.

    Ensuite, nous voulons appliquer ce style à un autre élément que nous ne pouvons faire comme si:

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

    Comme vous pouvez le voir la durée ci-dessus est notre maître dans l'élément div est notre "esclave", qui vous permettra de toujours avoir la même largeur et hauteur que c'est master.
    ng-style="style" signifie que nous ajoutons le style css contenus dans notre champ d'application variable appelée style à la plage.

    J'espère que vous comprenez pourquoi et comment j'en suis arrivé à cette solution, voici une plnkr avec une démonstration de l'affichage de ma solution en action.

  2. 0

    Voici un exemple de l'application d'autres éléments de la largeur de l'élément courant.

    La largeur de l'élément qui a le nom de la classe "conteneur" s'applique à la div à l'aide de flexibleCss angular js directive

    <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' 
             });
            };
   });