Skip to main content
 首页 » 编程设计

angularjs之ng-bind 与 angular 中的一次绑定(bind)有什么区别

2025年02月15日22zengkefu

Angular js中的“ng-bind”和“一次性绑定(bind)”有什么区别。

如果有任何区别,我应该在哪里使用它们?

请您参考如下方法:

双向数据绑定(bind)

AngularJS 中的双向数据绑定(bind)意味着将数据从模型绑定(bind)到 View ,反之亦然(数据从作用域/ Controller 流向 View ,从 View 流向作用域/ Controller )。 ' ng 模型 ' 是用于实现双向数据绑定(bind)的 Angular 指令。无论 View 是否要求更新数据,从范围/ Controller 对该模型的任何修改都将自动传播到 View ,并且从 View 对该模型的任何修改都将立即反射(reflect)回范围/ Controller 。

单向数据绑定(bind)

AngularJS 中的单向数据绑定(bind)意味着将数据从模型绑定(bind)到 View (数据从范围/ Controller 流向 View )。 ' ng 绑定(bind) ' 是用于实现单向数据绑定(bind)的 Angular 指令。绑定(bind)后,无论 View 是否要求更新数据,范围/ Controller 对该模型的任何修改都将自动传播到 View 。从 View 到 Controller 对模型的任何更改都不会发生传播。

一次性数据绑定(bind)

顾名思义,绑定(bind)发生在 仅一次 ,即在第一个摘要循环中。一次性绑定(bind)允许模型或 View 在第一个摘要周期时根据 Controller 设置的值更新一次。从 AngularJS 1.3 开始,您可以使用“:: ”标记来创建一次性数据绑定(bind)。这些绑定(bind)会在值稳定后取消注册自己的 $watch() 函数(这基本上意味着值已定义)。

一次性绑定(bind)用于页面稳定后不会改变的值。 “稳定”通常意味着表达式已被赋值。一旦设置了值,在重新加载页面之前,对 Controller 中值的更改不会更改显示的值。
语法是 {{::expression}}。

所以,对于那些在页面稳定后不会改变的值或列表,总是尽量使用一次性绑定(bind)。这将减少我们应用程序中不必要的观察者的数量。

<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>