我在使用指令时遇到问题。
AngularJS指令在切换Bootstrap选项卡时不起作用,或者如果我尝试的话我会再次返回。
我觉得jQuery库本身存在一些问题..我用于调整大小列的内容。 网址:http://www.bacubacu.com/colresizable/#samples
我的指令代码:
order by id ASC
我的Html代码:
define([
'angular',
'app',
'lodash',
'jquery',
'colResizeable'
],
function(angular, app, _, $) {
'use strict';
angular
.module('grafana.directives')
// .module('grafana.controllers')
.directive('columnResizeable', function() {
return {
restrict: 'A',
link: function(scope, elem) {
setTimeout(function() {
elem.colResizable({
liveDrag: true,
gripInnerHtml: "<div class='grip'></div>",
draggingClass: "dragging",
onDrag: function() {
//trigger a resize event, so paren-witdh directive will be updated
$(window).trigger('resize');
}
});
});
}
};
});
});
我调试了这个并且知道,当页面加载时,一些html内容正在添加。
<table id="common_query_editor" class="table table-bordered table-hover" ng-if="!panel.procesChart" column-resizeable>
// Some code it there
</table>
但下次此内容未加载。 一些html行为在两个时间都有所不同。
我正在查看此链接:Why does this width watching AngularJS directive not work upon switching Bootstrap tabs?
但无法找到任何解决方案。
我如何观看如果该指令正在加载..我把控制台置于指令内但不触发控制台。 <div class="JCLRgrips" style="width: 1208px;"><div class="JCLRgrip" style="left: 202px; height: 91px;"><div class="grip"></div><div class="JColResizer"></div></div><div class="JCLRgrip" style="left: 403px; height: 91px;"><div class="grip"></div><div class="JColResizer"></div></div><div class="JCLRgrip" style="left: 604px; height: 91px;"><div class="grip"></div><div class="JColResizer"></div></div><div class="JCLRgrip" style="left: 805px; height: 91px;"><div class="grip"></div><div class="JColResizer"></div></div><div class="JCLRgrip" style="left: 1007px; height: 91px;"><div class="grip"></div><div class="JColResizer"></div></div><div class="JCLRgrip JCLRLastGrip" style="left: 1209px; height: 91px;"></div></div>
请帮帮我..