Angular выражения с значениями Modernizr?

Я хотел бы показать разные элементы управления, если для новых типов ввода нет поддержки встроенного браузера html 5.

Я надеялся сделать что-то вроде этого:

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

Однако, похоже, что Modernizr не доступен для выражений Angular.

Это способ сделать это, чтобы поместить все значения Modernizr, которые меня интересуют в корневом каталоге при запуске, чтобы их можно было использовать в выражениях или есть лучший способ?

Ответ 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

Ответ 2

Сначала убедитесь, что в проект включен Модернизатор. Я создал простой провайдер, который позволит 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 выражение, которое передается директиве в функцию - это фрагмент берется из директивы ng-click, которая поставляется с Angular, мы обертываем его в нашей собственной функции для немного СУХОЙ

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