Angular expressions with Modernizr values?

angularjs, javascript, modernizr

Solution

You can put all of Modernizr on the rootScope and it will work (note that `Modernizr.inputtypes.datetime-local` in `ng-show` should be `Modernizr.inputtypes.datetimeLocal`)...

app.run(function ($rootScope) {
    $rootScope.Modernizr = Modernizr;    
});

But my preference is to make it injectable using `constant()`, and expose just the required properties on the scope so the view is not coupled to Modernizr...

app.constant("Modernizr", Modernizr);

app.controller("controller", function ($scope, Modernizr) {
    $scope.browser = {
        supportsDateimeLocalInput: Modernizr.inputtypes.datetimeLocal,
        supportsEmailInput: Modernizr.inputtypes.email
    };    
});

And in the view...

<p ng-show="browser.supportsDatetimeLocalInput">
    Modernizr says datetime-local is supported!
</p>

JSFiddle

Problem

I would like to show different controls if there is no html 5 native browser support for the new input types. I was hoping to do something like this: ``` <p ng-show="{{Modernizr.inputtypes.datetime-local}}">Modernizr says datetime-local is supported!</p> ``` However it appears that Modernizr is not available to Angular expressions. Is the way to go about this to put all the Modernizr values I'm interested in on the rootscope on startup so they can be used in expressions or is there a better way?

Original source