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

Posted

技术标签:

【中文标题】使用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 绑定的速度有关。

以上是关于使用angularjs,ngInit加载视图时初始化范围值的正确方法?的主要内容,如果未能解决你的问题,请参考以下文章

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

angularjs中的初始数据加载

为什么在构造函数中初始化的成员变量会在离子角的ngInit中未定义?

加载 angularjs 视图后加载 jquery 模块?

加载视图以查看问题 - AngularJS + ui.router

从angularjs初始化materializecss下拉列表时出错