Wyrażenia kątowe z wartościami Modernizr?

Question

Chciałbym pokazać różne formanty, jeśli nie ma obsługi przeglądarki macierzystej html 5 dla nowych typów wejścia.

miałem nadzieję zrobić coś takiego:

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

Jednak wydaje się, że modernizr nie jest dostępna do wyrażenia kątowe.

Czy jest na to sposób, aby umieścić wszystkie wartości Modernizatora, które mnie interesują, na korzeniu podczas uruchamiania, aby można je było używać w wyrażeniach lub czy istnieje lepszy sposób?

Answer 1

można umieścić wszystkie modernizr na rootScope i będzie działać (zauważ, że w ng-showModernizr.inputtypes.datetime-localModernizr.inputtypes.datetimeLocal powinno być) ...

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

Ale moja preferencja jest aby wstrzyknięciach za pomocą constant() i wystawiać zaledwie wymagane właściwości dotyczące zakresu więc widok nie jest sprzężony z modernizr ...

app.constant("Modernizr", Modernizr); 

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

I w widoku ...

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

JSFiddle

Answer 2

Najpierw upewnij się, że modernizr zawarte w projekcie. Stworzyłem prostego dostawcę, który pozwoli, aby Modernizr był wstrzykiwany do naszej dyrektywy, a nie globalnie dostępny. Używamy Modernizr do wykrycia, czy jesteśmy na urządzeniu dotykowym w dalszej części dyrektywy. 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 || {}; 
    }; 
}); 

Następny zdefiniujmy nasza szybka dyrektywa kliknięcie

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

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

Zauważysz mamy wstrzykuje dwie zależności w naszym szybko kliknij dyrektywy. Pierwszym z nich jest $parse, który konwertuje kątowego wyraz, który jest przekazywany do dyrektywy do funkcji - to fragment pochodzi z dyrektywy ng-click którym statki z kanciasty możemy zawinąć go w naszym własnym funkcji na trochę sucha

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