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

Question

Is there any way to apply the bootstrap carousel only conditionally for mobile devices and use it's content as static html for desktop?

I've the specification to have no duplicated html to display the same content differently for mobile and desktop (defined by the respective bootstrap breakpoint definitions and the devices width). That's why I can't just use two different containers for the content. In the design there is a carousel given for mobile whose content should be displayed as static html for desktop.

Answer 1

UI-Bootstrap doesn't handle conditionally showing ui components, but plain ol' angular do, you can write a directive that watches for screen size and resize events and updates a value accordingly, then use an ng-if with that value.

1. bind a value to the resize event and run $apply() when width changes

2. attach a watch to $window.innerWidth and listen to it's values, when apply will run the watch will test if the width is bigger or smaller than 768 px.

    // 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. in your 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