Question

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

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

Answer 1

UI-Bootstrap不会有条件地显示ui组件，但是普通的OL＆＃39; angular do，您可以编写一个指令来监视屏幕大小并调整事件大小并相应地更新值，然后使用具有该值的ng-if。

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

将手表附加到$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;
      }
    });
  }
}
}

中的

<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

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

1 个答案: