【问题标题】:correct way to initialise scope values when the view is loaded with angularjs, ngInit?使用angularjs,ngInit加载视图时初始化范围值的正确方法?
【发布时间】:2013-12-12 14:57:37
【问题描述】:

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

ng-init="init()"

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

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

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

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

【问题讨论】:

    标签: javascript angularjs view angularjs-scope angularjs-ng-init


    【解决方案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 绑定的速度有关。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-22
    相关资源
    最近更新 更多