angularjs – angular指令的内容未呈现,除非您手动强制页面重排

我在ui-bootstrap和angular 1.4中遇到了以下奇怪的行为.当我将一个footable table指令放在一个名为hpanel的自定义引导程序面板中时,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指令用于隐藏表的某些列,并在单击表行时显示它们.它还提供分页.它似乎不适用于页面加载,但当我调整页面大小并且屏幕大小超过媒体类型边距(因此从中等大小的屏幕变为大屏幕的引导css术语)时,会出现分页按钮,隐藏的列将被隐藏.

这是我在主模块app.js中导入footable指令的方法：

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发现这个错误已得到修复

所以,是的,这是指令中的一个错误,它使它在从服务器获取数据之前绘制自己.使用bugfix我刚刚将load-when =“vm.tools”属性添加到指令中,它现在工作正常.

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