Window resize information in angular

Question

I just posted this fiddle thinking it might be useful for people like me. It shows how simple javascript can be passed to the angular scope. In this case, the area receives information about the use of the window.

http://jsfiddle.net/spacm/HeMZP/

For personal use, I will transfer the following data to the angular area:

• width and height
• change orientation / orientation
• iframe definition
• OS Detection

using the variable navigator.platform

 function isInIFrame(){ return window.location !== window.parent.location; } function updateMediaInfoWH() { if((typeof(mediaInfo.inIFrame)!='undefined') && (!mediaInfo.inIFrame)) { mediaInfo.width = innerWidth; mediaInfo.height = innerHeight; updateMediaInfoOrientation(); } tellAngular(); } function tellAngular() { console.log("tellAngular"); var domElt = document.getElementById('mainContainer'); scope = angular.element(domElt).scope(); console.log(scope); scope.$apply(function(){ scope.mediaInfo = mediaInfo; scope.info = mediaInfo.width; }); } 

Any comments are welcome.

Answer 1

I do not see a question to answer, so I assume that your question is looking for information about your idea.

Getting work with Angular can be very different from how you usually work, mainly because of their full and full use of dependency injection.

You do not need to "tell" Angular anything; you must have access to all this information through a nested dependency, the Angular service.

Using what you showed me, it might look something like this:

 my.MediaInfo = function($window) { this.window_ = $window; this.inIframe = $window.self !== $window.top; if(!this.inIFrame) { this.width = $window.innerWidth; this.height = $window.innerHeight; } else { this.width = this.height = ...; } } my.angular.controller = function($scope, mediaInfo) { // {width: X, height: Y, inIframe: false} $scope.mediaInfo = mediaInfo; } 

Then your Angular module will look like this:

 angular.module('module', []) .service('mediaInfo', my.MediaInfo) .controller('mainCtrl', my.angular.controller); 

Hope this is a good demonstration of how you should receive data in Angular.