具有Modernizr值的角度表达式？

Question

如果没有针对新输入类型的html 5本机浏览器支持,我想显示不同的控件.

我希望做这样的事情:

 <p ng-show="{{Modernizr.inputtypes.datetime-local}}">Modernizr says datetime-local is supported!</p>

然而,似乎Modernizr不适用于Angular表达式.

是这样的方法将我感兴趣的所有Modernizr值放在启动时的根镜上,这样它们可以用在表达式中还是有更好的方法？

Answer 1

你可以把所有的Modernizr对rootScope,它会工作(注意,Modernizr.inputtypes.datetime-local在ng-show应Modernizr.inputtypes.datetimeLocal)...

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

但我的偏好是使用它进行注入constant(),并在范围上公开所需的属性,以便视图不与Modernizr耦合......

app.constant("Modernizr", Modernizr);

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

在视图中......

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

的jsfiddle