我怎么能知道通过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引导活动类的改变指令

回答

相关问题