Kann nicht berechnen offset von einem Element in AngularJS

Question

ich die folgende Direktive haben:

app.directive('myObject', function(){ 
    return { 
    restrict: 'A', 
    link: function(scope, elem){ 
     console.log(elem[0].offsetHeight); 
    } 
    }; 
}); 

, die im Grunde die offsetHeight seiner Zielelements protokolliert, aber es funktioniert nicht. Ich schätze es, weil es die Höhe berechnet, wenn das Element noch keinen Inhalt hat.

Wie kann ich dieses Problem beheben, ohne eine timeout zu verwenden? Gibt es eine eingebaute Lösung für dieses Problem?

Plunkr

Answer 1

Das Problem ist ng-repeat rendert träge und die Link-Funktion vor, dass gefeuert wird. Sie können dieses Problem beheben, indem Sie watcher haben, die elem[0].offsetHeight Wert auf jedem Digest-Zyklus auswerten wird. Daher, wenn ng-repeat es Rendering beendet, ruft es einen Digest-Zyklus und wegen Änderung in elem[0].offsetHeight Wert ruft es seinen Callback.

Richtlinie

var app = angular.module('plunker', []); 

app.directive('myObject', function(){ 
    return { 
    restrict: 'A', 
    link: function(scope, elem){ 
     var calculateHeight = scope.$watch(function(){ 
     return elem[0].offsetHeight; 
     }, function(newVal, oldVal){ 
     //my awesome code here. 
     console.log(newVal, oldVal); 
     calculateHeight(); //de-registering watcher for performance reason 
     }) 
    } 
    }; 
}); 

Demo Here

---

Andere alternative Art und Weise Sie tun können, ist, können Sie andere Richtlinie über ng-Repeat-Element platzieren denen $emit ein Ereignis, wenn es mit Rendering abgeschlossen & dann haben wir Ereignis Listener innerhalb der Direktive, die dieses Ereignis abhören und Höhe berechnen wird.