ng-bind与角度中的一次绑定有什么区别

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

在角度js中“ng-bind”和“一次性绑定”之间有什么区别。

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

如果有任何差异，我应该在哪里使用它们？

5 个解决方案

#1

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.

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

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.

AngularJS中的单向数据绑定意味着将数据从Model绑定到View（数据流从范围/控制器流向视图）。 'ng-bind'是一个用于实现单向数据绑定的角度指令。绑定后，无论视图是否要求更新数据，对范围/控制器对该模型的任何修改都将自动传播到视图。对于从视图到控制器的模型的任何更改，都不会发生传播。

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

顾名思义，绑定只发生一次，即在第一个摘要周期中。一次性绑定允许模型或视图在第一个摘要周期时从控制器设置的值更新。从AngularJS 1.3开始，您可以使用“::”标记创建一次性数据绑定。这些绑定在值稳定后取消注册自己的$ watch（）函数（这基本上意味着定义了值）。

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

一次性绑定用于在页面稳定后不会更改的值。 “稳定”通常表示已为表达式赋值。设置值后，在重新加载页面之前，对控制器中值的更改不会更改显示的值。语法是{{:: 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>

#2

These are not mutually exclusive concepts. You can one-time bind with ng-bind as well:

这些不是相互排斥的概念。您也可以使用ng-bind进行一次性绑定：

<div ng-bind="::productName"></div>

#3

"ng-bind" is simply the html attribute version of AngularJS's regular {{expression}} syntax.

“ng-bind”只是AngularJS常规{{expression}}语法的html属性版本。

So, <div ng-bind="productName"></div> is equivalent to <div>{{productName}}</div>.

因此，

等同于

{{productName}} 。

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}}. Following the above example, the syntax is

语法是{{:: expression}}。按照上面的例子，语法是

<div>{{::productName}}</div>

A complete explanation of the algorithm used to determine if a page is stable can be found here:

可以在此处找到用于确定页面是否稳定的算法的完整说明：

https://docs.angularjs.org/guide/expression

https://docs.angularjs.org/guide/expression

#4

Two-Way Data-Binding

双向数据绑定

Two-way data binding provides the ability to effortlessly take the value of a property on your scope and display it on your view while also having a text input update it without any crazy logic

双向数据绑定提供了轻松获取示波器上属性值并在视图上显示它的能力，同时还有一个文本输入更新它而没有任何疯狂的逻辑

One-Time Data-Binding

一次性数据绑定

First, I want to be sure to point out this is NOT one-way data-binding. Such a thing does not really exist as a convention provided by Angular. 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.

首先，我想确定指出这不是单向数据绑定。这样的事情并不像Angular提供的惯例那样存在。一次性绑定允许模型或视图在第一个摘要周期时从控制器设置的值更新。

#5

In simple way,i understood like this,

以简单的方式，我理解为这样，

Two way Data-binding - ng-model

双向数据绑定 - ng-模型

Links both the {{}}(in the HTML) and $scope (in the controller) of the variable and updates the value of the variable if any of the changes happen.

链接变量的{{}}（在HTML中）和$ scope（在控制器中），如果发生任何更改，则更新变量的值。

One way Data-binding - ng-bind

一种方式数据绑定 - ng-bind

Links only from $scope to the {{}}, but not vice versa.

仅从$ scope链接到{{}}，但反之亦然。