ngModel ngModel指令将输入、选择、文本区域(或自定义表单控件)绑定到作用域上的属性。

该指令的优先级为1。

例子恰好

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

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

ngBind ngBind属性告诉Angular用给定表达式的值替换指定HTML元素的文本内容，并在表达式的值发生变化时更新文本内容。

该指令的优先级为0。

例子恰好

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元素的文本内容 给定表达式的值。

我们可以使用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>

ng-model

ng-model directive in AngularJS is one of the greatest strength to bind the variables used in application with input components. This works as two way data binding. If you want to understand better about the two way bindings, you have an input component and the value updated into that field must be reflected in other part of the application. The better solution is to bind a variable to that field and output that variable whereever you wish to display the updated value throughoput the application.

ng-bind

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

这个例子可以帮助你理解。

ngModel ngModel指令将输入、选择、文本区域(或自定义表单控件)绑定到作用域上的属性。

该指令的优先级为1。

例子恰好

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

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

ngBind ngBind属性告诉Angular用给定表达式的值替换指定HTML元素的文本内容，并在表达式的值发生变化时更新文本内容。

该指令的优先级为0。

例子恰好

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元素的文本内容 给定表达式的值。

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

如果您在使用ng-bind还是ng-model之间犹豫不决，请尝试回答以下问题:

只需要显示数据吗?

是:ng-bind(单向绑定) No: ng-model(双向绑定)

您需要绑定文本内容(而不是值)吗?

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

你的标签是HTML <input>?

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