AngularJs $scope 变量在控制器加载时初始化较晚

Posted 2023-03-15

【中文标题】AngularJs $scope 变量在控制器加载时初始化较晚

【英文标题】：AngularJs $scope variables are late in initializing when controller loads

【发布时间】：2015-10-05 11:52:50

【问题描述】：

我正在使用 AngularJs 开发 html5 移动应用程序。 Windows phone 和 android 上的性能还可以，但在 ios 上，它在某些设备上产生了性能问题。

问题是当我们从一个视图切换到另一个视图时，控制器没有按时加载，因此 $scope 变量没有初始化。我在视图中的绑定中使用这些变量，因此应该隐藏的元素是可见的。

这发生在依赖于控制器内部模型和操作的元素上。这会造成性能问题。

已编辑 Imp 事情：这不是在第一次加载视图时发生的。当我回到其他视图并返回时，它开始发生（即控制器没有操作。没有变量被初始化）

【问题讨论】：

你能分享一些代码吗？

可以使用路由resolve预加载数据。需要更多细节

好吧，这里没有警告，但是当我在 $scope.init() 函数的末尾应用警报时，警报会一一出现 10 次。同样正如我在上面的 Q 中编辑的那样，当视图加载时它不会第一次发生。它发生在之后。

【参考方案1】：

这是一个有点笼统的问题。但您可以做的主要有两件事。

解析路由中的数据，确保控制器运行前数据可用。

在超时中包装范围变量以确保渲染 dom。

【讨论】：

dom 已渲染，但控制器内部没有任何操作。视图在没有任何操作的情况下是可见的。假设 $scope.ddlShow 是一个用于显示下拉列表的变量。下拉列表是可见的，并且 $scope.ddlShow 甚至没有初始化。 Imp 事情：这不是在第一次加载视图时发生的。当我回到其他视图并返回时，它开始发生

【参考方案2】：

假设你正在使用

<div ng-show="isSomeFlag"></div>
<div ng-hide="isSomeFlag"></div>

在你的控制器内部，你正在使用

$scope.isSomeFlag= true;

添加以下内容：

<div ng-show="isLoading && isSomeFlag"></div>
<div ng-hide="isLoading && isSomeFlag"></div>

并在最后一行的控制器中将 isLoading 标志设置为 true。

$scope.isSomeFlag = true;
...
$scope.isLoading = true; // controller ends here (below)

通过这种方式，元素将按预期运行。但是，还有许多其他方法，例如解决等，但这应该可以解决您的 UI 更新问题。