仅在移动设备上使用 angular ui bootstrap carousel

Question

有没有什么方法可以仅对移动设备有条件地应用引导轮播并将其内容用作桌面的静态 html？

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

Answer 1

UI-Bootstrap 不处理有条件地显示 ui 组件，但是普通的 ol' angular 可以，您可以编写一个指令来监视屏幕大小和调整事件大小并相应地更新一个值，然后使用带有该值的 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