如何在所有 angularjs 处理后显示 html

Question

我正在使用 angularjs，并且我有一个表，其中包含使用 ng-repeat 动态创建的行和列。每个单元格都有一个包含 ng-include 的指令。在处理单元格的内容时，会终止 ng-repeat，并且表格会暂时显示为空单元格。我想阻止页面视图，直到所有角度处理都完成。有可能吗？

我加载行和列来加载一个表，例如：

<table>
   <tr ng-repeat="row in rows">
      <td ng-repeat="col in cols">
         <my-directive row="row" col="col" tamplate-cell-url="{{templateCellUrl}}">
         </my-directive>
      </td>
   </tr>
</table>

我的指令：

angular.module('app').directive('myDirective', function () {
  return {
    restrict: 'E',
    scope: {
      row: '=',
      col: '=',
      templateCellUrl: '@'
    },
    replace: true,
    link: function (scope, element, attrs, ctrl) {
      scope.url = function () {
        return scope.templateCellUrl || 'cell-default.html'
      }
    },
    template: '<div ng-include="url()"></div>'
  }
})

Answer 1

是的，有一个简单的解决方案。为此使用ng-show 或ng-hide

<div ng-hide="variable == undefined">
//Your HTML Code
</div>

在上面的代码示例中，如果 $scope.variable 未定义（意味着它尚未初始化），它将隐藏您的 html 内容。如果有东西被分配给它，它会向你显示 DOM 内容。

对于多个变量的使用和条件。

Answer 2

听起来像是 ng-cloak 指令的工作。

ngCloak 指令用于防止 AngularJS html 模板 浏览器以原始（未编译）的形式简要显示 应用程序加载时的表单。使用该指令来避免 html模板显示引起的不良闪烁效果。

看这里https://docs.angularjs.org/api/ng/directive/ngCloak

所以在你的单元格指令中你可以这样做：

<div ng-cloak>
      <ng-include src="something.html'"></ng-include>           
</div>