Angularjs 如何使用Angular UI'；仅当浏览器不支持本机日期输入时，才使用s引导日期选择器？

我想使用Angular UI，但对于支持日期输入类型的设备（例如，

iOS

），我想使用本机日期选择器

---

我该怎么做？

您可以使用Modernizer之类的工具检测浏览器是否支持日期输入。本页有一个例子

使用此条件，您可以显示不同的html组件

I，只需将

ng transclude

包装为

ng if

HTML

<div my-if-browser-feature="inputtypes.date">
  <input type="date">
</div>
<div my-if-browser-feature="!inputtypes.date">
  <div class="alert alert-danger">
    Your browser sucks
  </div>
</div>

你的浏览器糟透了

脚本

myApp.directive('myIfBrowserFeature', function() {

  return {
    template: '<div ng-if="hasFeatures"><div ng-transclude></div></div>', 
    transclude: true,
    scope: true,
    link: function($scope, $element, $attrs) {

      $scope.hasFeatures = true;

      var features = ($attrs.myIfBrowserFeature || "").split(' ');

      var fl = features.length;

      while(fl && $scope.hasFeatures) {
        var f = features[--fl];

        if(f.length === 0) { continue; }

        var cmp = f.charAt(0) === '!' ? false : true;

        if(cmp === false) { f = f.substr(1); }

        var p = Modernizr;
        var q = f.split('.');

        while(q.length && p !== undefined) {
          p = p[q.shift()];
        }

        $scope.hasFeatures = (!p) == (!cmp);
      }
    }
  };
});

myApp.directive（'myIfBrowserFeature'，function（）{
返回{
模板：“”，
是的，
范围：正确，
链接：函数（$scope、$element、$attrs）{
$scope.hasFeatures=true；
var features=（$attrs.myIfBrowserFeature | | |“”）.split（“”）；
var fl=特征长度；
while（fl&&$scope.hasFeatures）{
var f=特征[--fl]；
如果（f.length==0）{continue；}
var cmp=f.charAt（0）=='！'？false:true；
如果（cmp==false）{f=f.substr（1）；}
var p=现代化；
var q=f.分割（'.'）；
while（q.length&&p！==未定义）{
p=p[q.shift（）]；
}
$scope.hasFeatures=（！p）==（！cmp）；
}
}
};
});

我已经在我的应用程序中使用了Modernizer，我知道如何检测浏览器是否支持日期/时间输入，但我不知道如何将其与Angular集成。这里有一个关于Modernizer的问题：。不幸的是，角度引导有一个非常具体的重点。如果您正在使用它们的元素指令，那么在不重写datepicker popup attributes指令的情况下，无法以编程方式更改datepicker指令的处理：（最后一个想法。您可以对两个不同的div使用

ng show

。一个在本机选择器不可用时显示引导选择器。另一个显示本机选择器。在控制器中，分配范围变量

$scope.nativeDateAvailable=[ModernizerCode]；

。然后在

ng show

中，显示正确的元素。谢谢，这看起来很漂亮，但总的来说，也可以使用

ng show

和

ng hide

来完成。我不想渲染两个元素并显示和隐藏一个元素，这取决于浏览器，我只想渲染一个元素，而该元素本身不应该使用自定义日期选择器，如果浏览器已经实现了该功能。据我所知，这不能直接用

ng show

/

ng hide

/

ng if

。例如

ng if=“modernizer.canvas”

即使浏览器支持画布，也不会呈现其内容，除非您对范围做了一些操作。但请告诉我我是否错了。除了

ng show

和

ng hide

始终呈现元素外，如果表达式不正确，

ng if

则不会。