oguzhan00 oguzhan00 - 1 year ago 45
CSS Question

How can I know bootstrap active class changes via AngularJS Directive

I I have a bootstrap html page and I want to change something when col-md-8 change to col-sm-8 in

's div. So I have o
nClassChange Directive
and when my UI component class change col-md-8 to col-sm-8 I want to call
Method from my controller. But I couldn't recognise bootstrap class changes changes from my directive.
When I compare old class and new class both of them are have same value.

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

her is my Controller:

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

Here is my directive

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


All of them working correctly, just I didn't find, how can I recognise currently which class is active according to my window size.

Answer Source

Each of the classes is actually 'active' all the time, but media queries in the CSS only apply certain styles. So the classes actually never change.

What you may actually want to look for is window resize. The media queries inside Bootstrap will tell you where the breakpoints are. Typically, the rules change at 768px, 992px, and 1200px. So if you look for the window resize, and check the size of the window, you will know which rules are being applied.


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