So erhalten Sie die Breite des Direktivenelements

Question

Ich versuche, die Elementbreite innerhalb einer Direktive zu erhalten.

Ich habe so etwas wie

html

<my-dir title=“toy.title” ng-if=“toy.name”></my-dir> 

Richtlinie

(function() { 
    'use strict'; 

    angular.module(‘myApp’) 
     .directive(‘myDir’, myDir); 

    function myDir() { 
     var directive = { 
      template: '<div class=“myClass”>Test here</div>', 
      restrict: 'E', 
      controller: testCtrl 
     }; 

     return directive; 
    } 

    function testCtrl($element) { 
     console.log($element[0].clientWidth()) -> output 0 
    } 
})(); 

Ich brauche die Elementbreite, um meine Funktion zu bauen, aber es gibt 0, wenn es hat Zeichenfolge ‘Test here’ in der Element. Es sollte größer als 0 sein. Ich bin mir nicht sicher, was schiefgelaufen ist. Kann mir jemand dabei helfen? Danke vielmals!

Answer 1

Bedenken Sie:

Dies ist ein bisschen wie ein kniffliges Problem ist, da es keine Garantie dafür gibt, dass der DOM zu der Zeit gemacht hat die Controller initialisiert.

Darüber hinaus, was passiert, wenn der Benutzer die Größe des Fensters ändert und das Element die Größe ändert? Berücksichtigen Sie, wofür Sie die Dimensionen des Elements verwenden, und ob die Möglichkeit der Größenänderung für Ihren Anwendungsfall von Bedeutung ist.

Lösungen:

Ich habe ein paar verschiedenen Ansätze verwendet, und ich würde jeder von ihnen nicht als perfekt sein. Aber sie funktionieren und verschiedene sind besser für verschiedene Anwendungsfälle geeignet.

Wahrscheinlich schnellste + schmutzigste Methode: Verwenden Sie eine $timeout oder $interval, die die Breite nach oder zu bestimmten Zeitverzögerungen überprüft.

Eine andere Möglichkeit besteht darin, eine $watch für eine Funktion auszuführen, die die Breite des Elements zurückgibt.

$scope.$watch(function(){ 
    return $element[0].clientWidth; 
}, function(width){ 
    console.log('width of: ', width); 
}); 

Ein Beispiel aus der Praxis:

Der häufigste Anwendungsfall in meiner app so etwas wie diese:

1. Direktive initialisiert + macht Asynchron-Anforderungsinhalt

2. zu laden

   Inhalt Anfrage löst auf, setzen Sie Daten in $scope Variable und $emit('contentLoaded')

3. eine bounds-watcher Richtlinie hört für $scope.$on('contentLoaded', checkBounds);

4. function checkBounds(){ ... } startet ein $interval des Elements Dimensionen

Fenster Resize abzufragen?

Wenn Sie mit einem responsiven Layout arbeiten, werden Sie wahrscheinlich Ihre Dimensionslogik bei der Größenänderung des Fensters und beim ersten Laden der Anweisung berücksichtigen.Es lohnt sich, dies bei der Einrichtung der Dimensionshandlerfunktionen zu berücksichtigen.