2016-06-13 6 views
0

3つのセクションでWebページを作成しています。ボタンをクリックすると、画面の幅に基づいて各セクションの幅が変更されます。画面のサイズを変更するとボタンをクリックすると、現在の画面サイズに基づいて3つのセクションが調整されます。画面サイズが変わったときに通知を受けようとしています。 ここに私のHTMLコードです。画面のサイズがangualrjsで変更されたときの通知方法

<div class="minbutton" ng-click="minimize()"> 
       <div ng-if="toggles"> 
        <i class="fa fa-angle-double-left"></i> 
       </div> 
       <div ng-if="!toggles"> 
        <i class="fa fa-angle-double-right"></i> 
       </div> 
     </div> 

ここは私のコントローラコードです。

$scope.minimize= function(){ 
       var width =$(window).width();         
       if($scope.toggles=== true){   
        $(".section1").attr('style','width:14%'); 
        $(".section2").attr('style','width:26%'); 
        $(".section2").attr('style','left:14%'); 
        $(".section3").attr('style','left:40%'); 
        $(".section3").attr('style','width:60%') 
        $scope.toggles = true; 
       } else { 
        section1Left = 56; 
        leftSection = width - 56; 
        section2Width=Math.round(leftSection * 0.30); 
        section3Left = section2Width + 56; 
        section3Width = Math.round(leftSection *0.70); 
        $(".section1").css("cssText","width:56px !important;");  
        $('.section2').css({left:section1Left,width:section2Width}); 
        $('.section3').css({left:section3Left,width:section3Width}): 
        $scope.toggles = false; 
       } 
      }; 

私は最初のセクションを固定し、私は現在の画面幅を通知し、取得したいと私は、現在でセクションを調整しようとしていますリサイズ画面sections.when 2のために幅の残りの部分を調整しています最小化]をクリックします幅。画面のサイズ変更時にどのように通知するのですか?

答えて

1

角度は答えではありません。これには特別なツールはありません。しかし、あなたはまだこのようなJSまたはJQueryを使用することができます Jquery resize

+0

それは私のために働いた。ありがとうございました 。 – hanu

+0

十分な情報があればplsに回答してください – Vitalii

関連する問題