Question

我在ui-bootstrap和angular 1.4中遇到以下奇怪的行为。当我在一个名为hpanel的自定义引导程序面板中放置一个footable表指令时，footable最初比面板本身占用的位置更多：

但是，如果我调整屏幕大小（例如，通过在此处折叠“开发人员工具”面板），footable指令会自行绘制并适合面板：

重要的是，我遇到了angular-c3图表指令的类似问题（它们加载错误，超出了hpanel的大小，但页面调整大小时表现得很好），所以它可能不仅仅是一个破碎的指令。

你见过类似的东西吗？

详情：

下面是一个HTML模板，代表页面的非功能部分。我们有一个hpanel，其中包含一个angular-footable directive ^1.0.3的表格。

这是模板（toolList.html）：

<div class="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    Available tools.
                </div>
                <div class="panel-body">
                    <input type="text" class="form-control input-sm m-b-md" id="filter" placeholder="Search in table">
                    <table id="example1" class="footable table table-stripped toggle-arrow-tiny" data-page-size="8" data-filter=#filter>
                        <thead>
                        <tr>
                            <th data-toggle="true">Id</th>
                            <th>Class</th>
                            <th>Label</th>
                            <th>Description</th>
                            <th data-hide="all">Owner</th>
                            <th data-hide="all">Contributor</th>
                            <th data-hide="all">Inputs</th>
                            <th data-hide="all">Outputs</th>
                            <th data-hide="all">Base command</th>
                            <th data-hide="all">Arguments</th>
                            <th data-hide="all">Requirements</th>
                            <th data-hide="all">Hints</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="tool in vm.tools">
                            <td><a ui-sref="tool-detail({id: tool.id})">{{tool.id}}</a></td>
                            <td>{{tool.tool_class}}</td>
                            <td>{{tool.label}}</td>
                            <td>{{tool.description}}</td>
                            <td>{{tool.owner}}</td>
                            <td>{{tool.contributor}}</td>
                            <td>{{tool.baseCommand}}</td>
                            <td>{{tool.arguments}}</td>
                            <td>{{tool.requirements}}</td>
                            <td>{{tool.hints}}</td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="5">
                                <ul class="pagination pull-right"></ul>
                            </td>
                        </tr>
                        </tfoot>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

footable指令用于隐藏表的某些列，并在单击表行时显示它们。它还提供分页。它似乎不适用于页面加载，但是当我调整页面大小并且屏幕大小超过媒体类型边距时（因此从中等大小的屏幕开始，它在bootstrap css术语中变成大屏幕），分页按钮出现并隐藏要隐藏的列。

以下是我在主模块footable中导入app.js指令的方式：

require("footable/js/footable");
require("footable/js/footable.filter");
require("footable/js/footable.striping");
require("footable/js/footable.sort");
require("footable/js/footable.paginate");
require("footable/css/footable.core.css")
require("angular-footable");

angular.module("app", [
    ...,
    "ui.footable",
])

我使用webpack加载所有这些模块，并使用bower来安装依赖项。

hpanel只是一个scss类，这是它的定义：

/* Panels */
.hpanel > .panel-heading {
  color: inherit;
  font-weight: 600;
  padding: 10px 4px;
  transition: all .3s;
  border: 1px solid transparent;
}

.hpanel .hbuilt.panel-heading {
  border-bottom: none;
}

.hpanel > .panel-footer, .hpanel > .panel-section {
  color: inherit;
  border: 1px solid $border-color;
  border-top: none;
  font-size: 90%;
  background: $color-bright;
  padding: 10px 15px;
}

.hpanel.panel-collapse > .panel-heading, .hpanel .hbuilt {
  background: #fff;
  border-color: $border-color;
  border: 1px solid $border-color;
  padding: 10px 10px;
  border-radius: 2px;
}

.hpanel .panel-body {
  background: #fff;
  border: 1px solid $border-color;
  border-radius: 2px;
  padding: 20px;
  position: relative;
}


.hpanel.panel-group .panel-body:first-child {
  border-top: 1px solid $border-color;
}

.hpanel.panel-group .panel-body {
  border-top: none;
}

.panel-collapse .panel-body {
  border: none;
}

.hpanel {
  background-color: none;
  border: none;
  box-shadow: none;
  margin-bottom: 25px;
}

.panel-tools {
  display: inline-block;
  float: right;
  margin-top: 0;
  padding: 0;
  position: relative;
}

.hpanel .alert {
  margin-bottom: 0;
  border-radius: 0;
  border: 1px solid $border-color;
  border-bottom: none;
}

.panel-tools a {
  margin-left: 5px;
  color: lighten($color-text, 20%);
  cursor: pointer;
}

.hpanel.hgreen .panel-body {
  border-top: 2px solid $color-green;
}

.hpanel.hblue .panel-body {
  border-top: 2px solid $color-blue;
}

.hpanel.hyellow .panel-body {
  border-top: 2px solid $color-yellow;
}

.hpanel.hviolet .panel-body {
  border-top: 2px solid $color-violet;
}

.hpanel.horange .panel-body {
  border-top: 2px solid $color-orange;
}

.hpanel.hred .panel-body {
  border-top: 2px solid $color-red;
}

.hpanel.hreddeep .panel-body {
  border-top: 2px solid $color-red-deep;
}

.hpanel.hnavyblue .panel-body {
  border-top: 2px solid $color-navy-blue;
}

.hpanel.hbggreen .panel-body {
  background: $color-green;
  color: #fff;
  border:none;
}

.hpanel.hbgblue .panel-body {
  background: $color-blue;
  color: #fff;
  border:none;
}

.hpanel.hbgyellow .panel-body {
  background: $color-yellow;
  color: #fff;
  border:none;
}

.hpanel.hbgviolet .panel-body {
  background: $color-violet;
  color: #fff;
  border:none;
}

.hpanel.hbgorange .panel-body {
  background: $color-orange;
  color: #fff;
  border:none;
}

.hpanel.hbgred .panel-body {
  background: $color-red;
  color: #fff;
  border:none;
}

.hpanel.hbgreddeep .panel-body {
  background: $color-red-deep;
  color: #fff;
  border:none;
}

.hpanel.hbgnavyblue .panel-body {
  background: $color-navy-blue;
  color: #fff;
  border:none;
}

.panel-group .panel-heading {
  background-color: $color-bright;
}

.small-header .hpanel {
  margin-bottom: 0;
}

.small-header {
  padding: 0 !important;
}

.small-header .panel-body {
  padding: 15px 25px;
  border-right: none;
  border-left: none;
  border-top: none;
  border-radius: 0;
  //  background: $color-bright;
}

.panel-body h5, .panel-body h4 {
  font-weight: 600;
}

.small-header .panel-body h2 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 0 0;
}

.small-header .panel-body small {
  color: lighten($color-text, 10%);
}

.hbreadcrumb {
  padding: 2px 0px;
  margin-top: 6px;
  margin-bottom: 0px;
  list-style: none;
  background-color: #fff;
  font-size: 11px;

  > li {
    display: inline-block;

    + li:before {
      padding: 0 5px;
      color: $color-navy-blue;
    }
  }

  > .active {
    color: lighten($color-text,20%);
  }
}

.wrapper {
  padding: 10px 20px;
}

.hpanel.collapsed .panel-body, .hpanel.collapsed .panel-footer {
  display: none;
}

.hpanel.collapsed .fa.fa-chevron-up:before {
  content: "\f078";
}
.hpanel.collapsed .fa.fa-chevron-down:before {
  content: "\f077";
}

.hpanel.collapsed.panel-collapse .panel-body {
  border-width: 0 1px 1px 1px;
  border-color: $border-color;
  border-style: solid;
}

.hpanel.collapsed .hbuilt.panel-heading {
  border-bottom: 1px solid $border-color;
}

body.fullscreen-panel-mode {
  overflow-y: hidden;
}

.hpanel.fullscreen {
  z-index: 2030;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  margin-bottom: 0;
}

.hpanel.fullscreen .showhide {
  display: none;
}

.hpanel.fullscreen .panel-body {
  min-height: calc(100% - 77px);
}

此处的tool.module.js文件，可为模板设置动画：

import angular from "angular";

var ToolResource = require("workflow/tool/tool.service");

class ToolListController {
    // @ngInject
    constructor($location, $stateParams, $state, tools) {
        this.$location = $location;
        this.$state = $state;
        this.$stateParams = $stateParams;

        this.tools = tools;
    }
}

// @ngInject
function routesList($stateProvider) {
    $stateProvider.state("tool-list", {
        url: "/tool",
        parent: "layout",
        templateUrl: "/app/workflow/tool/toolList.html",
        controller: "ToolListController",
        controllerAs: "vm",
        data: {
            pageTitle: "Tool",
            pareDesc: "List of tools, available for workflow construction.",
        },
        resolve: {
            ToolResource: "ToolResource",
            tools: function(ToolResource) {
                return ToolResource.query().$promise;
            }
        }
    });
}

module.exports = angular.module("tool", [])
  .service('ToolResource', ToolResource)
  .controller('ToolListController', ToolListController)
  .config(routesList);

tool.service.js：

module.exports = function ToolResource($resource) {
    return $resource('/api/tool/:id', {id: '@id'});
}

解答： 社区很棒！

1。5年前，该指令已创建
12天前，此错误已修复by Alexryan in his fork
10天前我在StackOverflow上发布了这个问题
8天前我在这个问题上放了一笔赏金
7天前ziscloud批准拉请求
今天早上赏金到期了，Walfrat发现错误已经修复了

所以，是的，这是指令中的一个错误，它在从服务器获取数据之前使其自行绘制。有了错误修正，我刚刚在指令中添加了load-when="vm.tools"属性，现在工作正常。

谢谢你，Alexryan，ziscloud，Walfrat和其他评论者/回答者。 StackOverflow和Github刚刚结束了我的一天！

Answer 1

由于您异步加载数据（如评论中所述），您的html会在其中包含任何数据之前呈现。这意味着该指令可能过早触发（如果它试图根据数据进行调整）。通常情况下，在这种情况下，您需要在html中依赖于数据加载的部分抛出ng-if（并在其位置显示加载gif或其他内容）。您可以运行ng-if off定义的数据本身，也可以维护一个在解析promise后设置的单独布尔值。

Answer 2

您使用此指令吗？ https://github.com/ziscloud/angular-footable/blob/master/src/angular-footable.js。它是一个自制的（意思是没有由footable的编辑器完成）指令，因此它可能无法正确实现与Angularjs一起使用。

看一下代码，如果你想延迟网格的初始化，即使你在你的状态下使用resolve属性，你也必须使用属性load-when，测试它是值得的。 load-when在开始时将是一个空数组，将在数组不再为空后触发加载，但绑定的数据不会用于我所看到的初始化。

注意：我自己无法设置合适的plnkr，我不知道你正在使用的版本（以及使用哪个jQuery版本）和在线链接似乎没有可用。

角度指令的内容未呈现，除非您手动强制页面重排

2 个答案: