В чем разница между ng-bind и однократной привязкой в ​​angular

Ответ 1

Двусторонняя привязка данных

Двусторонняя привязка данных в AngularJS означает привязки данных от модели к представлению и наоборот (данные передаются из области/контроллера в вид и из представления в область/контроллер). ' ng-model' - это директива angular, используемая для обеспечения двусторонней привязки данных. Любые изменения в этой модели из области/контроллера будут автоматически передаваться в представление независимо от того, запрашивает ли представление обновленные данные и какие изменения в этой модели из представления будут немедленно отображены обратно в область/контроллер.

Односторонняя привязка данных

Односторонняя привязка данных в AngularJS означает привязки данных от модели к представлению (данные передаются из области/контроллера в представление). ' ng-bind' - это директива angular, используемая для обеспечения односторонней привязки данных. После привязки любые изменения этой модели из области/контроллера будут автоматически передаваться в представление независимо от того, запрашивает ли представление обновленные данные. Не происходит распространения какого-либо изменения модели с точки зрения на контроллер.

Одноразовая привязка данных

Как следует из его названия, привязка происходит только один раз, т.е. в первом цикле дайджеста. Одноразовая привязка позволяет обновлять модель или представление ОДИН ИЗ значения, заданного контроллером, после первого цикла дайджеста. Начиная с AngularJS 1.3, вы можете использовать токен :: для создания одноразовых привязок данных. Это привязки, которые отменят регистрацию собственных функций $watch() после стабилизации значения (что в основном означает, что значение определено).

Одноразовая привязка используется для значений, которые не будут изменены после стабильной страницы. "Стабильный" обычно означает, что этому выражению присвоено значение. Как только значение будет установлено, изменения в значении в контроллере не изменят отображаемое значение до тех пор, пока страница не будет перезагружена. Синтаксис: {{:: expression}}.

Итак, для тех значений или списков, которые не будут меняться после стабильной страницы, всегда старайтесь использовать одноразовую привязку. Это уменьшит количество ненужных наблюдателей в нашем приложении.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="customer in ::customers" >
    {{::customer.name}}
    ({{customer.address}})
      <button ng-click="change(customer)">Change</button>
     </div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.customers = [{
        name: 'Gloria Jane',
        address: 'Silo Park, 9300 East Orchard Road,    Greenwood Village, CO, 80114'},{
        name: 'Nicholas Michael',
        address: 'Village Park,  East Lake Avenue, Aurora, CO, 80016'
    }];
  
    $scope.change = function(customer) {
        customer.address = 'Cherry Creek State Park, 4201 S Parker Rd, Aurora, CO 80014, USA';
        customer.name ='Tessy Thomas';
    };
});
</script>

Ответ 2

Это не взаимоисключающие понятия. Вы также можете однократно связываться с ng-bind:

< div ng-bind = ":: productName" > </div>

Ответ 3

"ng-bind" - это просто атрибут html-атрибута регулярного синтаксиса {{expression}} AngularJS.

Итак, <div ng-bind="productName"></div> эквивалентно <div>{{productName}}</div>.

Одноразовая привязка используется для значений, которые не будут изменены после стабильной страницы. "Стабильный" обычно означает, что этому выражению присвоено значение. Как только значение будет установлено, изменения в значении в контроллере не изменят отображаемое значение до тех пор, пока страница не будет перезагружена.

Синтаксис {{::expression}}. Следуя приведенному выше примеру, синтаксис

<div>{{::productName}}</div>

Полное описание алгоритма, используемого для определения стабильности страницы, можно найти здесь:

https://docs.angularjs.org/guide/expression

Ответ 4

Двусторонняя привязка данных

Двунаправленная привязка данных обеспечивает возможность без труда принимать значение свойства в вашей области и отображать его на вашем представлении, а также иметь текстовый ввод, обновлять его без сумасшедшей логики

Одноразовая привязка данных

Во-первых, я хочу быть уверенным, что это НЕ односторонняя привязка данных. Такая вещь действительно не существует как соглашение, предоставляемое Angular. Одноразовая привязка позволяет обновлять модель или представление ОДИН ИЗ значения, заданного контроллером, после первого цикла дайджест.