仅在呈现动态 ui-view 内容后才显示页脚答案

【问题标题】：Display Footer only after dynamic ui-view content has been rendered仅在呈现动态 ui-view 内容后才显示页脚
【发布时间】：2016-03-08 08:58:57
【问题描述】：

在我的index.html 文件中，我有以下代码：

<body>
    <div ui-view></div>
    <div ng-include="footer.html"></div>
</body>

问题是在加载和渲染与活动状态相关的动态内容之前显示页脚。

我尝试使用事件$viewContentLoaded，但该事件是在加载视图内容时触发的，而不是在编译时触发的。

我在index.html 中使用了ng-include，因为我的页脚是通用的，应该在所有应用页面中使用。

如何解决这个问题？

【问题讨论】：

【解决方案1】：

将您的 Angular 脚本包含在头部而不是页面底部。在加载 angular 之前，ui-view 没有任何意义。

您可能还想使用粘性页脚来防止页脚跳动的任何问题。

【讨论】：

【解决方案2】：

您可以绑定范围变量，而不是将 url 分配给 ng-include，并且该范围变量的值可以使用指令中的实际 URL 进行更改，该指令在您的所有视图中使用两种方式绑定 '=' 进行重用

【讨论】：

我应该在 ui-view 的内容已经完全呈现后设置范围变量的值。问题是我没有反映这一点的事件。
我怀疑多个视图关联到一个控制器，如果这样你仍然可以使用 $viewContentLoaded 通过计算所有视图是否已加载和渲染假设你有 5 个视图关联在你的控制器中，像这样，$scope。 callAfterAllViewLoaded = 0; $rootScope.$on('$viewContentLoaded', function(event){ $scope.callAfterAllViewLoaded++; if($scope.callAfterAllViewLoaded === 5){ // 更新到这个控制器关联的视图数量 $scope.callAfterAllViewLoaded = 0;
从 API 获取数据后，您可以从视图控制器发出/调度自定义事件“$rootScope.$emit('dataRead')”，将事件侦听器添加到页脚控制器上的自定义事件这将是您的视图控制器 "$rootScope.$on('dataRead',function({$scope.dataRead = true}))" 的父控制器，并将范围变量绑定到页脚的 ng-if='dataRead' .默认情况下 dataRead 范围将是假的/未定义的。希望这种方法对您有所帮助