切换Bootstrap选项卡或返回时AngularJS指令不起作用

时间:2016-02-10 10:27:08

标签: javascript jquery html angularjs twitter-bootstrap

我在使用指令时遇到问题。

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>

请帮帮我..

0 个答案:

没有答案