我有一个引导HTML页面，我想在div中将col-md-8更改为col-sm-8时进行一些更改#image-wrapper。所以我有o，nClassChange Directive并且当我的UI组件类将col-md-8更改为col-sm-8时，我想reTroop从控制器中调用Method。但是我无法识别自举指令对引导类的更改。当我比较旧班级和新班级时，它们都具有相同的价值。
<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')});
}
);
}
}
;
})
所有这些都可以正常工作，只是我没有找到，如何根据我的窗口大小当前识别出哪个类是活动的。
每个类实际上一直都处于“活动”状态，但是CSS中的媒体查询仅适用于某些样式。因此，类实际上永远不会改变。
您可能真正想要查找的是窗口调整大小。Bootstrap中的媒体查询将告诉您断点在哪里。通常，规则更改为768px，992px和1200px。因此，如果您寻找窗口调整大小并检查窗口的大小，您将知道正在应用哪些规则。
例子：
angular.element($window).on('resize', function() {
if (window.innerWidth < 768) {
// col-sm is applied
} else {
// col-md is applied
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句