ng-model和ng-bind有什么不同？
我目前正在学习AngularJS，并且很难理解ng-bind和ng-model之间的区别。
谁能告诉我他们有什么不同，什么时候应该使用另一个？
ng-bind具有单向数据绑定（$ scope – > view）。 它有一个快捷键{{ val }} ，它显示插入到html中的作用域值$scope.val ，其中val是一个variables名。
ng-model意图放在表单元素中，并具有双向数据绑定（$ scope – > view和view – > $ scope），例如<input ng-model="val"/> 。
托什的回答很好地解决了问题的核心。 这里有一些额外的信息….
filter和格式器
ng-bind和ng-model都有在输出给用户之前转换数据的概念。 为此， ng-bind使用filter ，而ng-model使用格式化器 。
filter（ng-bind）
使用ng-bind ，您可以使用filter来转换您的数据。 例如，
<div ng-bind="mystring | uppercase"></div> ，
或者更简单：
<div>{{mystring | uppercase}}</div>
请注意， uppercase是内置的angular度filter ，但您也可以构build自己的filter 。
格式化程序（ng-model）
要创build一个ng-model格式化程序，可以创build一个指令，该指令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在上面的ng-bind示例中等同于大uppercase 滤器所做的事情。
parsing器
现在，如果你打算允许用户改变mystring的值呢？ ng-bind只有一个方法绑定，从model – > view 。 但是， ng-model可以从视图 – > 模型绑定，这意味着您可以允许用户更改模型的数据，并且使用parsing器可以简化用户的数据格式。 以下是这个样子：
app.directive('myModelFormatter', function() { return { require: 'ngModel', link: function(scope, element, attrs, controller) { controller.$parsers.push(function(value) { return value.toLowerCase(); }); } } }
使用ng-model格式化程序/分析程序示例的实时重播器来玩
还有什么？
ng-model也有内置的validation。 只需修改$parsers或$formatters函数即可调用ngModel的controller.$setValidity(validationErrorKey, isValid) setValidity controller.$setValidity(validationErrorKey, isValid)函数 。
Angular 1.3有一个新的$ validators数组 ，您可以用它来validation，而不是$parsers或$formatters 。
Angular 1.3也支持ngModel getter / setter
ngModel
ngModel指令将input，select，textarea（或自定义表单控件）绑定到作用域上的属性。
该指令以优先级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负责：
- 将视图绑定到模型中，其他指令如input，textarea或select是否需要。
- 提供validation行为（即必需的，号码，电子邮件，url）。
- 保持控制状态（有效/无效，肮脏/原始，接触/未触摸，validation错误）。
- 在元素（ng-valid，ng-invalid，ng-dirty，ng-pristine，ng-touch，ng-untouched）上设置相关的css类，包括animation。
- 注册该控件与其父窗体。
ngBind
ngBind属性告诉Angular将指定HTML元素的文本内容replace为给定expression式的值，并在该expression式的值改变时更新文本内容。
该指令在优先级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负责：
- 使用给定expression式的值replace指定HTML元素的文本内容。
如果你在使用ng-bind或ng-model之间犹豫，试着回答这些问题：
你只需要显示数据？
-
是：
ng-bind（单向绑定） -
编号：
ng-model（双向绑定）
你需要绑定文本内容 （而不是价值）？
-
是：
ng-bind -
No：
ng-model（你不应该在需要value的地方使用ng-bind）
你的标签是HTML
<input>吗？
-
是的：
ng-model（你不能使用ng-bind和input标签） -
No：
ng-bind
NG-模型
AngularJS中的ng-model指令是将应用程序中使用的variables与input组件绑定在一起的最大优点之一。 这用作双向数据绑定。 如果您想更好地了解双向绑定，您可以使用input组件，并且更新到该字段的值必须反映在应用程序的其他部分。 更好的解决scheme是将variables绑定到该字段并输出该variables，无论您希望在应用程序中显示更新的值。
NG-绑定
ng-bind与ng-model的工作方式大不相同。 ng-bind是单向数据绑定，用于在HTML组件内部显示值作为内部HTML。 该指令不能用于绑定variables，而只能用于HTML元素的内容。 事实上，这可以与ng-model一起使用来将组件绑定到HTML元素。 这个指令对于更新div，span等内部HTML内容的块非常有用。
这个例子会帮助你理解。
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>
ngModel通常使用input标签来绑定一个variables，我们可以从控制器和html页面中改变variables，但ngBind用来在html页面中显示一个variables，我们可以改变variables只是从控制器和HTML只是显示variables。
我们可以使用ng-bind和<p>来显示，我们可以使用ng-bind {{model}}快捷方式，我们不能在htmlinput控件中使用ng-bind，但是我们可以使用ng-bind {{model}}与htmlinput控件。
<input type="text" ng-model="name" placeholder="Enter Something"/> <input type="text" value="{{name}}" placeholder="Enter Something"/> Hello {{name}} <p ng-bind="name"</p>
