ng-bind有单向数据绑定($scope——>视图)。它有一个快捷键\{\{ val }} 显示范围值$scope.val插入html，其中val是一个变量名

ng-model打算放在表单元素内部，并具有双向数据绑定($scope—>视图和view—> $scope)，例如<input ng-model="val"/>。

废话的答案很好地触及了问题的核心。这里有一些额外的信息....

过滤器,格式器

ng-bind和ng-model都具有在为用户输出数据之前转换数据的概念。为此，ng-bind使用过滤器，而ng-model使用格式器。

过滤器(ng-bind)

使用ng-bind，您可以使用过滤器来转换数据。例如,

# EYZ0,

或者更简单地说:

# EYZ0

注意uppercase是一个内置的角过滤器，尽管你也可以建立自己的过滤器。

格式化程序(ng-model)

要创建一个ng-model格式化器，你需要创建一个执行require: 'ngModel'的指令，它允许该指令访问ngModel的controller。例如:

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

然后在你的部分:

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

这本质上是ng-model与uppercase 过滤器在上面的ng-bind示例中所做的相同。

解析器

现在，如果您计划允许用户更改mystring的值呢?ng-bind只有一种绑定方式，从模型到>视图。但是，ng-model可以从视图—>模型绑定，这意味着您可以允许用户更改模型的数据，并且使用解析器您可以以精简的方式格式化用户的数据。这是它的样子:

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

< a href = " http://plnkr.co/edit/QFrHJMm9p14EgGpTDr13?p=preview">播放ng-model格式器/解析器示例的live plunker

还有什么?

ng-model也有内置的验证。只需修改$parsers或$formatters函数来调用ngModel的controller.$setValidity(validationErrorKey, isValid)函数。

Angular 1.3有了一个新的$validators数组可以用来验证，而不是$parsers或$formatters。

Angular 1.3也支持ngModel的getter/setter

ngModel

该指令的优先级为1。

例# EYZ0

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

超文本标记语言

<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负责:

• 将视图绑定到模型中，其他指令如 输入，textarea或选择require.
• 提供验证行为(即所需的，数字，电子邮件，url)。
• 保持控件的状态(有效/无效，脏/原始，
.触摸/未触及，验证错误)
• 在元素上设置相关css类(ng-valid, ng-invalid， Ng-dirty, ng-pristine, ng-touched, ng-touched)包括 李动画。< / >
• 将控件注册到其父窗体。

ngBind

该指令的优先级为0。

例# EYZ0

JAVASCRIPT

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

超文本标记语言

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

ngBind负责:

• 替换指定HTML元素的文本内容

# EYZ0

ng-model指令在AngularJS中是将应用中使用的变量与输入组件绑定的最强大的指令之一。这是双向数据绑定。如果您想更好地理解双向绑定，您有一个输入组件，更新到该字段的值必须反映在应用程序的其他部分。更好的解决方案是将一个变量绑定到该字段，并将该变量输出到您希望在整个应用程序中显示更新后的值的任何位置。

# EYZ0

Ng-bind的工作原理与ng-model有很大不同。ng-bind是一种数据绑定方式，用于将html组件中的值显示为内部html。此指令不能用于与变量绑定，而只能用于与HTML元素内容绑定。事实上，这可以与ng-model一起使用，将组件绑定到HTML元素。这个指令对于用内部HTML内容更新div、span等块非常有用。

这个例子会帮助你理解。

如果你在使用<强> # EYZ0 < / >强还是<强> # EYZ1 < / >强之间犹豫不决，试着回答这些问题:

你只有需要显示数据吗?

• 是:ng-bind (单向绑定)

• No: ng-model (双向绑定)

你需要绑定文本内容(而不是value)吗?

• 是的:# EYZ0

• No: ng-model (你不应该在需要value的地方使用ng-bind)

你的标签是HTML <input>吗?

• 是:ng-model (你不能使用ng-bind与<input>标签)

• 没有:# EYZ0

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

我们可以使用ng-bind与<p>显示，我们可以使用快捷方式为ng-bind \{\{model}}，我们不能使用ng-bind与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>