gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 11:44:00 27 4
gpt4 key购买 nike

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>

关于angularjs - ng-bind 与 angular 中的一次绑定(bind)有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33480548/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com