angular js中的“ ng-bind”和“一次性绑定”有什么区别?
如果有任何区别,我应该在哪里使用它们?
双向数据绑定
AngularJS中的双向数据绑定意味着将数据从模型绑定到视图,反之亦然(数据从范围/控制器流到视图,再从视图流到范围/控制器)。“ NG-模型 ”是用于实现双向数据绑定的角指令。无论范围是否要求更新数据,对范围/控制器对该模型的任何修改都将自动传播到视图,并且对视图对该模型的任何修改将立即反映回范围/控制器。
单向数据绑定
AngularJS中的单向数据绑定意味着将数据从模型绑定到视图(数据从示波器/控制器流到视图)。“ ng-bind ”是用于实现单向数据绑定的角度指令。绑定之后,无论该视图是否在请求更新的数据,对示波器/控制器对该模型的任何修改都将自动传播到该视图。从视图到控制器的任何模型更改都不会传播。
一次性数据绑定
顾名思义,绑定 仅 发生 一次 ,即在第一个摘要循环中。一次性绑定允许在第一个摘要周期从控制器设置的值开始一次更新模型或视图。从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>