携帯機器のみで角度uiブートストラップカルーセルを使用する

Question

モバイルデバイスに条件付きでブートストラップカルーセルを適用する方法はありますか？そのコンテンツをデスクトップ用の静的なHTMLとして使用しますか？

私はモバイルとデスクトップ（それぞれのブートストラップブレークポイントの定義とデバイスの幅で定義）で同じ内容を表示するために重複したHTMLを持っていません。だからこそ私はコンテンツに2つの異なるコンテナーを使うことができません。このデザインでは、コンテンツをデスクトップ用の静的なHTMLとして表示する必要があるモバイル用のカルーセルがあります。

Answer 1

UI-Bootstrapは条件付きでuiコンポーネントを表示することはできませんが、普通の角度では画面サイズやサイズ変更イベントを監視して値を更新するディレクティブを作成し、その値でng-ifを使用します。

1. は、resizeイベントに値をバインドし、幅が

2. を変更したとき、それが適用される値は、幅が大きくなったりであれば時計はテストします実行されるのです$window.innerWidthに時計を添付し、耳を傾ける$apply()を実行します768ピクセル未満です。あなたのhtmlで

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