什么是模型和约束之间的区别(What's the difference between ng

目前，我正在学习AngularJS和我难以理解的区别ng-bind和ng-model 。

谁能告诉我，他们是如何不同，当一个人应该比其他用？

Answer 1:

NG-绑定具有单向数据绑定（$范围- >视图）。 它有一个快捷{{ val }}其显示范围值$scope.val插入HTML，其中val是变量名。

NG-模型旨在形式元素的内部，被投入并具有双向数据绑定（$范围- >图和视图- > $范围），例如<input ng-model="val"/>

Answer 2:

tosh's answer gets to the heart of the question nicely. Here's some additional information....

Filters & Formatters

ng-bind and ng-model both have the concept of transforming data before outputting it for the user. To that end, ng-bind uses filters, while ng-model uses formatters.

filter (ng-bind)

With ng-bind, you can use a filter to transform your data. For example,

<div ng-bind="mystring | uppercase"></div>,

or more simply:

<div>{{mystring | uppercase}}</div>

Note that uppercase is a built-in angular filter, although you can also build your own filter.

formatter (ng-model)

To create an ng-model formatter, you create a directive that does require: 'ngModel', which allows that directive to gain access to ngModel's controller. For example:

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$formatters.push(function(value) {
        return value.toUpperCase();
      });
    }
  }
}

Then in your partial:

<input ngModel="mystring" my-model-formatter />

This is essentially the ng-model equivalent of what the uppercase filter is doing in the ng-bind example above.

---

Parsers

Now, what if you plan to allow the user to change the value of mystring? ng-bind only has one way binding, from model-->view. However, ng-model can bind from view-->model which means that you may allow the user to change the model's data, and using a parser you can format the user's data in a streamlined manner. Here's what that looks like:

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$parsers.push(function(value) {
        return value.toLowerCase();
      });
    }
  }
}

---

Play with a live plunker of the ng-model formatter/parser examples

---

What Else?

ng-model also has built-in validation. Simply modify your $parsers or $formatters function to call ngModel's controller.$setValidity(validationErrorKey, isValid) function.

Angular 1.3 has a new $validators array which you can use for validation instead of $parsers or $formatters.

Angular 1.3 also has getter/setter support for ngModel

Answer 3:

ngModel

所述ngModel指令结合输入，选择，文本区域（或定制的形式控制）上的范围的特性。

该指令在执行优先级1。

例如Plunker

JAVASCRIPT

angular.module('inputExample', [])
   .controller('ExampleController', ['$scope', function($scope) {
     $scope.val = '1';
}]);

CSS

.my-input {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    background: transparent;
}
.my-input.ng-invalid {
    color:white;
    background: red;
}

HTML

<p id="inputDescription">
   Update input to see transitions when valid/invalid.
   Integer is a valid value.
</p>
<form name="testForm" ng-controller="ExampleController">
    <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
         aria-describedby="inputDescription" />
</form>

ngModel负责：

• 结合视图到模型，这是其它指令，如输入，文本区域或选择需要。
• 提供验证行为（即所需，号码，电子邮件，网址）。
• 保持控制的状态（有效/无效，脏/质朴，感动了/不动，验证错误）。
• 在元素上设置相关的CSS类（NG-有效，NG-无效，NG-脏，NG-质朴，NG-感动，NG-不变），包括动画。
• 注册与其父形式的控制。

ngBind

所述ngBind属性告诉角来代替与给定表达式的值指定的HTML元素的文本内容，并更新文本内容时的表达的改变的值。

该指令在执行优先级0。

例如Plunker

JAVASCRIPT

angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
    $scope.name = 'Whirled';
}]);

HTML

<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>

ngBind负责：

• 与给定表达式的值替换指定的HTML元素的文本内容。

Answer 4:

如果您正在使用之间犹豫ng-bind或ng-model ，试图回答这些问题：

---

你只需要显示的数据？

• 是： ng-bind （单向绑定）

• 编号： ng-model （双向绑定）

你需要绑定文本内容 （而不是价值）？

• 是： ng-bind

• 编号： ng-model （你不应该使用在需要值绑定）

是你的标签的HTML <input>

• 是： ng-model （不能使用绑定与<input>标签）

• 无： ng-bind

Answer 5:

一个模型

在AngularJS NG-模型指令是结合在应用与输入部件中使用的变量的最大强度之一。 这可以作为双向数据绑定。 如果您想了解有关双向绑定好，你有一个输入组件，并更新到该字段中的值必须在应用程序的另一部分被反射。 更好的解决方案是徘徊无论你希望显示的更新值throughoput的应用程序中的变量，变量绑定到该字段和输出。

结合

NG-绑定的作品比NG-模式非常不同。 NG-绑定是结合用于显示HTML组件内部的值作为内HTML单向数据。 该指令不能用于与可变的，但只能用HTML元素的内容结合。 INFACT这可以用NG-模型一起使用的组件绑定到HTML元素。 这个指令是用于更新块类似div，跨度等方面与内HTML内容是非常有用的。

这个例子会帮助你理解。

Answer 6:

 angular.module('testApp',[]).controller('testCTRL',function($scope) { $scope.testingModel = "This is ModelData.If you change textbox data it will reflected here..because model is two way binding reflected in both."; $scope.testingBind = "This is BindData.You can't change this beacause it is binded with html..In above textBox i tried to use bind, but it is not working because it is one way binding."; }); 

 div input{ width:600px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <head>Diff b/w model and bind</head> <body data-ng-app="testApp"> <div data-ng-controller="testCTRL"> Model-Data : <input type="text" data-ng-model="testingModel"> <p>{{testingModel}}</p> <input type="text" data-ng-bind="testingBind"> <p ng-bind="testingBind"></p> </div> </body> 

Answer 7:

ngModel通常使用的输入标签绑定，我们可以从控制器和html页面更改变量，但在ngBind html页面使用显示的变量的变量，我们可以刚刚从控制器和HTML改变变量只是显示变量。

Answer 8:

我们可以使用纳克绑定与<p>显示，我们可以使用快捷为ng-bind {{model}}我们不能使用纳克绑定的HTML输入控件，但我们可以用快捷方式ng-bind {{model}}与HTML输入控件。

<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
  Hello {{name}}
<p ng-bind="name"</p>

文章来源: What's the difference between ng-model and ng-bind