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>
必须这样做真的,真的很愚蠢: 我相信这会给我4美元的观察者...所以我正在寻找一个替代方案来避免像那样愚蠢。
问题内容: 目前,我正在学习AngularJS和我难以理解的区别和。 谁能告诉我它们的区别以及何时应使用另一种? 问题答案: ng-bind 具有单向数据绑定($ scope->视图)。它有一个快捷方式 ,用于显示插入到html中的范围值,其中是变量名。 ng-model 用于放置在表单元素中,并具有双向数据绑定($ scope-> view and view-> $ scope),例如。
问题内容: 我参加了一次有角度的演讲,会议中提到的一位参加者胜于束缚。 原因之一是将变量放在监视列表中,并且仅当发生模型更改时,才将数据推送到视图中查看;另一方面,每次都会对表达式进行插值(我想这是角周期)并推送值,即使值更改与否。 也有人说,如果屏幕上没有太多数据,则可以使用,并且性能问题将不可见。有人可以帮我阐明一下这个问题吗? 问题答案: 如果您没有使用,则类似以下内容: 您可能会在解决之前
我对Angular的一次性绑定有困难。 假设我想将ngIf与一次性绑定结合使用,如下所示: 在这种情况下,角为if中的表达式创建了一个监视。一旦它被解析为非未定义的值,监视就会被删除。 如果它仅被解析为真实值,则后代html树将被添加到DOM并随后呈现。 现在这一切都很好,但我真的想避免初始监视,只需解析表达式,如果它未定义,只需设置一个监视。原因在我的场景中相当复杂,但基本上我有一些机制,可以暂
应用程序。组成部分ts 应用程序。组成部分html 当我重新加载浏览器并检查日志时。角度重新记录4次。如果你知道为什么会这样,请告诉我。 链接闪电战:https://stackblitz.com/edit/angular-ivy-zqjr2d?file=src/app/app.component.ts
问题内容: 我想知道是否可能有一个ng类,其中class一度绑定,并且每个摘要周期评估一次class。 我知道我可以一次绑定完整的ng-class, 但是我需要一次绑定一个特定的表达式 当然,这是行不通的: 有办法吗? 问题答案: 方法1: 方法2: