我怎麼能知道通過AngularJS引導活動類的改變指令

-1

我我有一個引導的HTML頁面，我想改變的東西時，COL-MD-8變化COL-SM-8在#image-wrapper的股利。所以我有o nClassChange Directive，當我的UI組件類將col-md-8更改爲col-sm-8時，我想從我的控制器調用reTroop方法。但我無法從我的指令中識別引導程序類更改的變化。當我比較舊類和新類時，它們都具有相同的值。我怎麼能知道通過AngularJS引導活動類的改變指令

<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')}); 
       } 
      ); 
     } 
    } 
     ; 

})

他們都正常工作，只是我沒有找到，怎麼能根據我的窗口大小，我確認當前哪個類是活動的。

來源

2016-08-15 oguzhan00

每個類實際上始終處於「活動」狀態，但CSS中的媒體查詢只應用某些樣式。所以類實際上永遠不會改變。

你實際上想要查找的是窗口大小。 Bootstrap內的媒體查詢會告訴你斷點在哪裏。通常，規則在768px，992px和1200px之間變化。因此，如果您尋找調整窗口大小，並檢查窗口的大小，您將知道正在應用哪些規則。

例子：

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

來源

2016-08-15 14:30:30 Chazzu

謝謝！我需要提高自己的引導知識 – oguzhan00

我怎麼能知道通過AngularJS引導活動類的改變指令

回答

相關問題