仅在移动设备上使用角度ui bootstrap轮播

Question

有没有办法只为移动设备有条件地应用bootstrap轮播，并将其内容用作桌面的静态html？

我的规范没有重复的html来为移动和桌面显示相同的内容（由相应的bootstrap断点定义和设备宽度定义）。 这就是为什么我不能只为内容使用两个不同的容器。 在设计中有一个为移动设备提供的轮播，其内容应显示为桌面的静态html。

Answer 1

UI-Bootstrap不处理有条件地显示ui组件，但是简单的'angular do，你可以编写一个指令来监视屏幕大小并调整事件大小并相应地更新一个值，然后使用带有该值的ng-if 。

1. 将值绑定到resize事件并在宽度更改时运行$apply()

2. 将手表附加到$window.innerWidth并听取它的值，当应用将运行时，手表将测试宽度是大于还是小于768像素。

    // inside directive app.directive('viewPortWatcher', function($window) { return { restrict: "AE", scope: { show: "=" }, link: function(scope, element) { var width = angular.element($window); width.bind('resize', function() { scope.$apply(); }); scope.$watch(function() { return $window.innerWidth; }, function(value) { if (value <= 768) { // sm scope.show = true; } else { scope.show = false; } }); } } } 

3. 在你的HTML中

    <view-port-watcher show="show"></view-port-watcher> <span ng-if="show"> show carousel </span> <span ng-if="!show"> don't show carousel </span> 

plunker