Difference between ng-bind and interpolation {{}} in Angular

后端 未结 9 1333
独厮守ぢ
独厮守ぢ 2020-12-03 02:05

Is there any difference between {{ }} and ng-bind in angular.

I am quite new to Angular. I started with using {{ }} and then in the documentation i find ng-bind. I

相关标签:
9条回答
  • 2020-12-03 02:44

    In AngularJs ng-bind directive works as alternative to the interpolation directive {{ }}. By inserting an ng-bind attribute to HTML element we can insert AngularJS data into it.

    Here is an example:

     <div ng-controller="DemoController" >
      <span ng-bind="demoData.doThis()"></span>
    </div>
    

    The Key Difference is ng-bind attribute wont show Html content on page loading, where as interpolation Directive show as flash of content without style while page loading.

    0 讨论(0)
  • 2020-12-03 02:45

    {{ }} can flash when the page is loading, ng-bind hides the expression properly until it is displayed correctly.

    0 讨论(0)
  • 2020-12-03 02:46

    Sometimes when we load our application in the browser , we can notice flashing content for some milliseconds before {{ name }} is resolved and data is loaded.

    This happens because the template is loaded before AngularJS had a chance to go in and compile the elements. To resolve this issue, you can use ng-cloak directive.

    In the first approach(i.e. {{}}), AngularJS evaluates the expression then replaces it with some value which sometime be left with the flashing double curly brackets but ng-bind saves this time by informing AngularJS to put the contents of the expression within the element itself.

    Note: {{}} sometimes cause performance issue if we have thousand of bindings in our page.In these scenario's, we should go with ng-bind.

    0 讨论(0)
提交回复
热议问题