ng-bind与一次性绑定在角度上有什么区别 [英] 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.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> 

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与一次性绑定在角度上有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！