Creating a dynamic pop-up modal with AngularJS - angularjs

Question

I am trying to create a Service to manage all of the different pop-up modals that will be used in my application. So far everything is going well except for having the ability to update the position of the modal on the screen every time it comes into view.
Here is my UPDATED directive
app.directive('skModal', function($window){
return {
restrict:'EA',
link: function(scope, elem, attrs){
var top, left;
scope.$watch(attrs.ngShow, function(newVal){
if(newVal) {
top = ($window.innerHeight - elem.outerHeight()) / 2;
left = ($window.innerWidth - elem.outerWidth()) / 2;
elem.css({ 'top': top, 'left': left });
}
});
}
} ;
});
I simply use ng-include to populate any template I wish into the modal, then I use $watch to check when the ngShow variable is flipped. The problem is that my elem DOM element is not IN the DOM at the time, so the outerHeight() and outerWidth() functions return 0

Answer 1

Without jQuery you should used angular.element,
angular.element(element).prop('offsetHeight');
You will give the same result
Angular.element does NOT support outerHeight() and height() ;)

Answer 2

I see from your comment that you fixed your issue with a large offset.
In case you want a different solution, you could also try removing ng-hide just before you take your measurement. Given that ngShow has just flipped, you may not need to re-apply it, though it will disrupt animation (if you're using it) if you don't.
scope.$watch(attrs.ngShow, function(newVal){
if(newVal) {
// remove ng-hide to take the measurement
angular.element(elem).removeClass('ng-hide');
top = ($window.innerHeight - elem.outerHeight()) / 2;
left = ($window.innerWidth - elem.outerWidth()) / 2;
// optionally re-apply ng-hide here
elem.css({ 'top': top, 'left': left });
}
});