は、どのように私は、私は、ブートストラップhtmlページを持っていると私は何かを変更したいAngularJS経由で指令

Question

をアクティブクラスの変更をブートストラップ知ることができたときにCOL-MD-8変更COL-SM-8年代のdivの#image-wrapperでへ。だから私はnClassChange Directive oを持っていると私のUIコンポーネントクラス変更COL-MD-8 COL-SM-8には、私は私のコントローラからreTroopメソッドを呼び出したいとき。しかし私は、私の指示からブートストラップクラスの変更の変更を認識できませんでした。私は古いクラスと新しいクラスを比較すると それらの両方が同じ値を持っています。

<div id="image-block" on-class-change update-fn="reTroop(className)" class="col-md-8 col-sm-8 col xs-12 "> 
    </div> 

彼女は私のコントローラである：ここでは

$scope.reTroop = function (className) { 
     console.log("RETROOP !!", className) 
    }; 

は、それらのすべては、ちょうど私がどのようにすることができ、見つけることができませんでした、正しく動作して私の指示

app.directive('onClassChange', function() { 
    return { 
     scope: {updateCtrlFn: '&updateFn'}, 
     link: function (scope, element, attrs) { 
      scope.$watch(function() { 
        return element.attr('class'); 
       }, function (newValue, oldValue) { 
        console.log("newValue", newValue); 
        console.log("oldValue", oldValue); 

        scope.updateCtrlFn({className: element.attr('class')}); 
       } 
      ); 
     } 
    } 
     ; 

}) 

です私は現在どのクラスが自分のウィンドウサイズに応じてアクティブであるかを認識しています。

Answer 1

の各クラスは、実際には「アクティブ」のすべての時間ですが、CSSメディアクエリは、特定のスタイルを適用します。したがって、クラスは決して変化しません。あなたが実際に探したいことは何

は、ウィンドウのサイズ変更です。 Bootstrap内のメディアクエリは、ブレークポイントの位置を示します。一般的に、ルールは768px、992px、および1200pxに変更します。あなたは、ウィンドウのサイズ変更を探して、ウィンドウのサイズをご確認のであれば、あなたはルールが適用されているかを知ることができます。

例：

angular.element($window).on('resize', function() { 
    if (window.innerWidth < 768) { 
     // col-sm is applied 
    } else { 
     // col-md is applied 
    } 
});