如何解决AngularJS为什么单击选项卡块ui不会在正确的位置显示
我在我的angularjs项目中使用blockUi。问题是我的html中有两个标签。
当我进入页面时,两个选项卡开始显示初始数据并一起显示块。该块应显示在div的中间,并且当我仅在一个选项卡中时效果很好。
当第一个选项卡没有完全加载数据时,如果我单击另一个选项卡,则第二个选项卡的块不在正确的位置,反之亦然。它显示在子页面的左上角而不是中间。
我认为这是影响结果的选项卡,但我不知道如何处理。
MainPage.html
<div class="portlet-body" id="rightbodycontent" style="height:800px;">
<div class="portlet-tabs">
<ul class="nav nav-tabs">
<li style="float:left;margin:-7px 0px 0px 0px">
<a href="#tab_1" data-toggle="tab">
MONTH
</a>
</li>
<li class="x" style="float:left;margin:-7px 0px 0px 0px">
<a href="#tab_2" data-toggle="tab">
DAY
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab_1">
<div ng-include="'page/monthdata.html'"></div>
</div>
<div class="tab-pane " id="tab_2">
<div ng-include="'page/daydata.html'"></div>
</div>
</div>
</div>
</div>
两个子页面具有各自的控制器,并且彼此相似:
daydata.html:
<div class="" ng-controller="daydataCtrl">
<div class="portlet" blockui block-option="option" block-shown="hasShown">
<h1>some content</h1>
</div>
</div>
monthdata.html:
<div class="" ng-controller="monthdataCtrl">
<div class="portlet" blockui block-option="option" block-shown="hasShown">
<h1>some content</h1>
</div>
</div>
控制器:
$scope.option = { //blockui弹框样式
message: '<div style="height:30px;line-height:30px;font-family: microsoft yahei;"><img src="assets/img/busy.gif" style="margin-top:-4px" /> 加载中...</div>',css: {
cursor: 'default',},overlayCSS: {
cursor: 'default'
}
};
blockui指令:
angular.module('wapDirectives')
.directive('blockui',function () {
return {
replace: true,restrict: 'A',scope: {
option: '=blockOption',isShow: '=blockShown'
},link: function (scope,element,attrs,ctrl) {
scope.$watch('isShow',function (newValue) {
if (angular.isDefined(newValue) && newValue) {
element.block(scope.option);
} else {
element.unblock();
}
});
}
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。