AngularJS : Why ng-bind is better than {{}} in angular?

前端 未结 12 794
灰色年华
灰色年华 2020-11-22 07:19

I was in one of the angular presentation and one of the person in the meeting mentioned ng-bind is better than {{}} binding.

One of the re

12条回答
  •  無奈伤痛
    2020-11-22 07:36

    According to Angular Doc:
    Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading... it's the main difference...

    Basically until every dom elements not loaded, we can not see them and because ngBind is attribute on the element, it waits until the doms come into play... more info below

    ngBind
    - directive in module ng

    The ngBind attribute tells AngularJS to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

    Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

    It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

    An alternative solution to this problem would be using the ngCloak directive. visit here

    for more info about the ngbind visit this page: https://docs.angularjs.org/api/ng/directive/ngBind

    You could do something like this as attribute, ng-bind:

    or do interpolation as below:

    {{my.name}}

    or this way with ng-cloak attributes in AngularJs:

    {{my.name}}

    ng-cloak avoid flashing on the dom and wait until all be ready! this is equal to ng-bind attribute...

提交回复
热议问题