ng-bind 与 angular 中的一次性绑定有什么区别 [英] what is the difference between ng-bind vs one time binding in angular

问题描述

angular js 中的ng-bind"和一次性绑定"有什么区别.

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

解决方案

双向数据绑定

AngularJS 中的双向数据绑定意味着将数据从模型绑定到视图，反之亦然(数据从作用域/控制器流向视图，从视图流向作用域/控制器).'ng-model' 是一个角度指令，用于实现双向数据绑定.无论视图是否要求更新数据，从作用域/控制器对该模型的任何修改都将自动传播到视图，并且从视图对该模型的任何修改都将立即反映回作用域/控制器.

单向数据绑定

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.address}})<button ng-click="change(customer)">Change</button>

<脚本>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.customers = [{name: '格洛丽亚·简',地址:'Silo Park, 9300 East Orchard Road, Greenwood Village, CO, 80114'},{名称:'尼古拉斯迈克尔'，地址:'乡村公园，东湖大道，奥罗拉，CO，80016'}];$scope.change = 函数(客户){customer.address = 'Cherry Creek State Park, 4201 S Parker Rd, Aurora, CO 80014, USA';customer.name ='Tessy Thomas';};});</script>

What is the difference between "ng-bind" and "one time binding" in angular js.

If there is any difference, where should I be using each of them?

解决方案

Two-way data binding

Two-way data binding in AngularJS means binding data from Model to View and vice versa (Data flows from the Scope/Controller to the View and from the View to the scope/controller). 'ng-model' is an angular directive used for achieving two-way data binding. Any modifications to that model from the Scope/Controller will be automatically propagated to the view regardless of whether the view is asking for the updated data and any modifications to that model from the View will be immediately reflected back to the Scope/Controller.

One-way data binding

One-way data binding in AngularJS means binding data from Model to View (Data flows from the scope/controller to the view). 'ng-bind' is an angular directive used for achieving one-way data binding. After the binding, any modifications to that model from the scope/controller will be automatically propagated to the view regardless of whether the view is asking for the updated data. No propagation happens for any change to the model from the view to the controller.

One-time data binding

As its name suggests, the binding happens only once, ie, in the first digest cycle. One-time binding allows for a model or view to be updated ONCE from the value set by the controller upon the first digest cycle. As of AngularJS 1.3, you can use the "::" token to create one-time data bindings. These are bindings that deregister their own $watch() functions once the value has stabilized (which basically means the value is defined).

One-time binding is used for values that won't change after the page is stable. "Stable" generally means that the expression has been assigned a value. Once the value is set, changes to the value in the controller won't change the displayed value until the page is reloaded. The syntax is {{::expression}}.

So, for those values or lists that won't change after the page is stable, always try to use one-time binding. This will reduce the number of unnecessary watchers in our application.

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

这篇关于ng-bind 与 angular 中的一次性绑定有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！