Ответ 1

В официальных документах есть некоторый намек: https://docs.angularjs.org/api/ng/directive/ngBind

Как правило, вы не используете ngBind напрямую, но вместо этого вы используете двойная курчавая разметка, подобная {{expression}}, которая аналогична, но меньше многословным.

Предпочтительно использовать ngBind вместо {{expression}}, если шаблон мгновенно отображается браузером в его исходном состоянии перед Angular скомпилирует его. Поскольку ngBind является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы.

Ответ 2

Наиболее очевидным отличием между ними является Flash of Unstyled content при использовании {{ ... }}.

Тем не менее, существует более тонкое различие между ними, если объект, который вы передаете в {{ obj }} и ng-bind="obj", не строка.

Из fooobar.com/questions/14284/...:

В зависимости от того, используете ли вы синтаксис {{ ... }} или ng-bind, .toJSON и функция .toString на вашем объекте будет вызвана для определения его представления.

Ответ 3

{{}} может мигать при загрузке страницы, ng-bind корректно скрывает выражение, пока оно не будет правильно отображаться.

Ответ 4

В директиве AngularJs ng-bind работает как альтернатива директиве интерполяции {{}}. Вставив атрибут ng-bind в элемент HTML, мы можем вставить в него данные AngularJS.

Вот пример:

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

Разница в ключах - это атрибут ng-bind, который не отображает содержимое Html при загрузке страницы, где в качестве интерполяционной директивы отображается как флэш-контент без стиля при загрузке страницы.

Ответ 5

В дополнение к вышеупомянутым ответам

Проблемы производительности с интерполяцией:

Как объяснено в этой нить лучше,

ng-bind является директивой и помещает наблюдателя в переданную переменную. Таким образом, ng-bind будет применяться только тогда, когда переданное значение действительно изменится.

Скобки, с другой стороны, будут грязно проверены и обновлены в каждом $digest, даже если это не необходимо.

Ответ 6

Иногда, когда мы загружаем наше приложение в браузере, мы можем заметить мигающий контент за несколько миллисекунд, прежде чем {{name}} будет разрешен и данные будут загружены.

Это происходит потому, что шаблон загружен до того, как у AngularJS появилась возможность войти и скомпилировать элементы. Чтобы решить эту проблему, вы можете использовать директиву ng-cloak.

В первом подходе (т.е. {{}}) AngularJS оценивает выражение, затем заменяет его некоторым значением, которое когда-то остается с мигающими двойными фигурными скобками, но ng-bind сохраняет это время, сообщая AngularJS, чтобы поместить содержимое выражение внутри самого элемента.

Примечание: {{}} иногда вызывают проблемы с производительностью, если у нас есть тысяча привязок на нашей странице. В этих сценариях мы должны пойти с ng-bind.

Ответ 7

Основное различие между ng-bind и {{}} заключается в том, что ng-bind создает наблюдателя для переменной, переданной ему, в то время как фигурные скобки ({{}}) будут (хранить все выражение в памяти, т.е. выполнять грязные - проверка и обновление выражения в каждом цикле дайджеста, даже если это не требуется.

ng-bind будет применяться только тогда, когда фактически пройденное значение изменяется.

Ответ 8

Другим отличием является способ отображения данных ng-bind и interpolation. ng-bind вызывает метод toString(), тогда как interpolation использует настраиваемую функцию "stringify".

Пример

<div ng-controller="showClockCtrl">
    <p>The current time is {{currentDateTime}}.</p>
    <p>The current time is <span ng-bind="currentDateTime"></span>.</p>
</div>

<div ng-controller="showClockCtrl">
    <p>MyObject is {{myObject}}</p>
    <p>MyObject is <span ng-bind="myObject"></span></p>
</div>

<script>
var showClockCtrl = function ($scope) {
    $scope.currentDateTime = new Date();
    $scope.myObject = {
        'key1': 'value1',
        'key2': 'value2',
        'key3': 'value3'
    }
};
</script>

Выход

The current time is "2017-11-18T15:09:59.429Z".

The current time is Sat Nov 18 2017 10:09:59 GMT-0500 (EST).

MyObject is {"key1":"value1","key2":"value2","key3":"value3"}

MyObject is [object Object]