具有 Modernizr 值的角度表达式？答案

【问题标题】：Angular expressions with Modernizr values?具有 Modernizr 值的角度表达式？
【发布时间】：2014-05-20 20:25:26
【问题描述】：

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

我希望做这样的事情：

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

不过，Angular 表达式似乎无法使用 Modernizr。

是否可以在启动时将我感兴趣的所有 Modernizr 值放在 rootscope 上，以便它们可以在表达式中使用，还是有更好的方法？

【问题讨论】：

标签： javascript angularjs modernizr

【解决方案1】：

您可以将所有 Modernizr 放在 rootScope 上，它会起作用（注意 ng-show 中的 Modernizr.inputtypes.datetime-local 应该是 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

【讨论】：

【解决方案2】：

首先确保您的项目中包含 Modernizr。我创建了一个简单的提供程序，它允许将 Modernizr 注入到我们的指令中，而不是全局访问。我们稍后在指令中使用 Modernizr 来检测我们是否在触摸设备上。 http://joegaudet.com/angular/mobile/2013/07/22/fast-clicks-with-angular-js.html

angular.module('fast-click').provider('Modernizr', function () {
    'use strict';

    this.$get = function () {
        return Modernizr || {};
    };
});

接下来让我们定义我们的快速点击指令

angular.module('fast-click').directive('fastClick', function ($parse, Modernizr) {
    'use strict';

    return {
         restrict: 'A',
         link: function (scope, element, attrs) {
         }
    };
});

您会注意到我们在快速点击指令中注入了两个依赖项。第一个是$parse，它将Angular 传递给指令到函数中的表达式 - this sn-p 取自 Angular 附带的 ng-click 指令，我们将它包装在我们自己的函数中以保持干燥

clickFunction = function (event) {
    // if something has caused this handler to be
    // canceled lets prevent execution
    if (!canceled) {
        scope.$apply(function () {
            fn(scope, {$event: event});
        });
    }
};

【讨论】：

全球访问它有缺点吗？
如何在 Angular 4 应用程序中使用 Modernizr？