使用angularjs，ngInit加载视图时初始化范围值的正确方法？

Posted 2023-02-26

【中文标题】使用angularjs，ngInit加载视图时初始化范围值的正确方法？

【英文标题】：correct way to initialise scope values when the view is loaded with angularjs, ngInit?

【发布时间】：2013-12-12 14:57:37

【问题描述】：

过去几周我一直在学习 angularJs，并查看了许多大型应用程序，以了解事物在现实世界中的运作方式。在大多数情况下，我注意到加载视图时：

ng-init="init()"

即在相关控制器中调用函数 init()。用于设置初始值。

BUT(big but) 在阅读 ngInit 上的 angular 文档时，我得到了一个看起来相当严厉的描述：

“ngInit 的唯一适当用途是为 ngRepeat 的特殊属性设置别名，如下面的演示所示。除了这种情况，您应该使用控制器而不是 ngInit 来初始化作用域上的值。”

所以我的问题是， 加载视图时使用 ngInit 初始化范围内的值是不好的做法吗？ 如果是这样，这是为什么呢？什么是正确的方法？

【参考方案1】：

这是不好的做法，因为视图的初始化时间与控制器的初始化时间不同，并且摘要循环必须处理该函数，这是对该循环的不必要添加。我假设你有类似的东西：

查看：

<div ng-init="init()">
 <span>thing</span>
</div>

控制器：

Module.controller('viewController', function(scope)
    ...
    var init = function()
     scope.thing = "123";
     ...
    
    ...
)

更好的做法是这样做：

查看：

<div>
 <span ng-bind="thing"></span>
</div>

控制器：

Module.controller('viewController', function(scope)
 scope.thing = "123";
)

【讨论】：

实际上，我建议你在 span 中使用 ngBind 指令来避免闪烁效果，即页面渲染时 javascript 未完全加载（例如：)

虽然您是对的，但来自 Angular 文档：“在 Angular 编译模板之前，浏览器暂时以原始状态显示模板时，最好使用 ngBind 而不是 expression 。 "这向我表明，在切换到 ng-bind 之前，你最好等着看你是否真的有这个问题。

您可能永远看不到问题，因为您的浏览器可能在一流的计算机上运行。我建议以预防的方式使用它，因为没有缺点。

ng-bind 仅在您的索引页面中真正有用。之后加载的任何 html 都不会产生闪烁效果。

如果他们有不同的行为，肯定会有一些不同。角度文档说通常您希望使用 表示法。虽然我使用 ng-bind 来解决您正在讨论的问题，但我通常使用 直到我发现问题。此外，通常问题与计算机性能的关系不大，而与您正在加载到 DOM 中的数据以及 Angular 绑定的速度有关。