Enquire.js and Angular

[Paul Hammant]

Enquire.js = http://wicky.nillia.ms/enquire.js

Has anyone played with this and Angular together?  For no particular reason other than a challenge, I'm trying to see if I can get Enquire.js and Angular to play together. The goal is to avoid media queries, and yet still be responsive to form-factors.

Enquire.js is going to invoke JavaScript functions if, say, a screen width is 768px or below, as well as one for higher than that.  That's outside of Angular's controller scope though.  Any ideas as to how to get them to work together?

- Paul

[Florian Orben]

Hey,

that shouldn't be too hard I guess:

Attach a namespace object to the window object: var myNamepace = {}; //outside of angular's scope

Then i'd create a service responsible for handling the enquire.js logic so it could be shared among different controllers/directives...

myApp.factory('EnquireService', ['$window', function($window) {

  screenWidth1000Match = function() { /* doSomething */ }; //or some other name, you get the point

  //attach to previously created object
  $window.myNamespace.screenWidth1000Match = screenWidth1000Match;

}])

//outside of angular's scope again register the function with enquire:

enquire.register("screen and (max-width:1000px)", {

  match : myNamespace.screenWidth1000Match

});

- Flo

[Florian Orben]

Nvm what I just posted, you could probably do it even easier since enquire is available as a global

myApp.factory('EnquireService', ['$window', function($window) {

  var myWidth = 50; //or sth like that

  enquire.register("screen and (max-width:1000px)", {

    match: function () {

      myWidth = 200;       

    }

  }).register("screen and (max-width:320px)", {

    match: function() {

      myWidth = 20;

    }

  });

  return {

    width: myWidth

  };

}]);