javascript - 具有 Modernizr 值的 Angular 表达式？

Question

如果没有对新输入类型的 html 5 native 浏览器支持，我想显示不同的控件。

我希望做这样的事情:

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

但是，Modernizr 似乎不适用于 Angular 表达式。

是否可以在启动时将我感兴趣的所有 Modernizr 值放在根作用域中，以便它们可以用于表达式中，或者是否有更好的方法？

Answer 1

您可以将所有 Modernizr 放在 rootScope 上，它会起作用(注意 ng-show 中的 Modernizr.inputtypes.datetime-local 应该是 Modernizr .inputtypes.datetimeLocal)...

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

但我的偏好是使用 constant() 使其可注入(inject)，并仅在作用域上公开所需的属性，这样 View 就不会与 Modernizr 耦合...

app.constant("Modernizr", Modernizr);

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

在 View 中...

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

JSFiddle