Question

我遇到了标签的AngularJS指令/模型加载问题。我有一个建立表的指令。除“动作”之外的所有标题名称都是通过从控制器传递动态构建的，如下面的代码片段所示：

<div class="col-xs-12" ng-cloak>
     <custom-data-table grid-options="ctrl.gridOptions"></custom-data-table>
</div>

在我的控制器中：

function MyController(allInjections) {

    var ctrl = this;

    //Load some stuff

    ctrl.gridOptions = [];

    function initCtrl() {

        ctrl.gridOptions = {
            // all fields
        };

        // some other stuff
    }

    initCtrl();
}

该指令在大多数情况下运行良好，但有时候，主要是在第一次加载页面时，由于某些原因我的标签没有加载。看看图片。

下图显示了我面临的问题。

此表格图像是我期待的

我在我的指令中添加了一个日志，以查看我收到的内容：

function CustomDataTable(allInjections) {

    var _dirPath = 'table.html';

    var directive = {
        restrict: 'EA',
        templateUrl: _dirPath,
        scope: {
            gridOptions: '=',
            checks: '='
        },
        link: linkFunc
    };

    function linkFunc($scope) {

        console.trace($scope.gridOptions);

        //do some stuff
    }
}

最后，在此之后并进行调试以试图弄清楚发生了什么，我注意到我的指令在标签工作时加载了两次（我不知道具体原因）。查看日志

在标签未正确加载时记录

加载标签时记录

我正在测试禁用缓存。

Answer 1

您可以使用ng-cloak指令。 ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示AngularJS html模板。请检查此链接：https://docs.angularjs.org/api/ng/directive/ngCloak

首次加载时标签丢失

1 个答案: