使用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 变量在控制器加载时初始化较晚
为什么在构造函数中初始化的成员变量会在离子角的ngInit中未定义?