ng-model 和 ng-bind 有什么区别
我目前正在学习 AngularJS，但很难理解 ng-bind 和 ng-model 之间的区别。
谁能告诉我它们有何不同以及何时应该使用另一种？
ng-bind 具有单向数据绑定（$scope --> 视图）。它有一个快捷方式 {{ val }}，它显示插入到 html 中的范围值 $scope.val，其中 val 是一个变量名。
ng-model 旨在放置在表单元素中，并具有双向数据绑定（$scope --> view 和 view --> $scope），例如 <input ng-model="val"/>。
托什的回答很好地触及了问题的核心。这里有一些额外的信息......
过滤器和格式化程序
ng-bind 和 ng-model 都具有在将数据输出给用户之前转换数据的概念。为此，ng-bind 使用 filters，而 ng-model 使用 formatters。
过滤器（ng-绑定）
借助 ng-bind，您可以使用 过滤器 来转换您的数据。例如，
<div ng-bind="mystring | uppercase"></div>，
或更简单地说：
<div>{{mystring | uppercase}}</div>
请注意 uppercase is a built-in angular filter，尽管您也可以 build your own filter。
格式化程序（ng 模型）
要创建 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 />
这实质上是 uppercase filter 在上面 ng-bind 示例中所做的 ng-model 等效项。
解析器
现在，如果您计划允许用户更改 mystring 的值怎么办？ ng-bind 只有一种方式绑定，从 model-->view。但是，ng-model 可以从 view-->model 绑定，这意味着您可以允许用户更改模型的数据，并使用 解析器< /em> 您可以以简化的方式格式化用户的数据。看起来是这样的：
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
还有什么？
ng-model 还具有内置验证。只需修改您的 $parsers 或 $formatters 函数以调用 ngModel's controller.$setValidity(validationErrorKey, isValid) function。
Angular 1.3 has a new $validators array 可用于验证，而不是 $parsers 或 $formatters。
Angular 1.3 also has getter/setter support for 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 负责：
将视图绑定到模型中，这是其他指令（例如 input、textarea 或 select）所需要的。
提供验证行为（即要求、号码、电子邮件、url）。
保持控件的状态（有效/无效、脏/原始、触摸/未触摸、验证错误）。
在元素上设置相关的 css 类（ng-valid、ng-invalid、ng-dirty、ng-pristine、ng-touched、ng-untouched），包括动画。
将控件注册到其父窗体。
绑定
该指令以优先级 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 元素的文本内容。
ng模型
AngularJS 中的 ng-model 指令是将应用程序中使用的变量与输入组件绑定的最大优势之一。这作为双向数据绑定工作。如果您想更好地了解双向绑定，您有一个输入组件，并且更新到该字段的值必须反映在应用程序的其他部分。更好的解决方案是将变量绑定到该字段并在您希望通过应用程序显示更新值的任何位置输出该变量。
ng-绑定
ng-bind 的工作方式与 ng-model 大不相同。 ng-bind 是一种数据绑定方式，用于将 html 组件内部的值显示为内部 HTML。该指令不能用于与变量绑定，只能用于与 HTML 元素内容绑定。事实上，这可以与 ng-model 一起使用，将组件绑定到 HTML 元素。该指令对于使用内部 HTML 内容更新 div、span 等块非常有用。
This example 会帮助您理解。
angular.module('testApp',[]).controller('testCTRL',function($scope) { $scope.testingModel = "这是模型数据。如果您更改文本框数据，它将反映在这里..因为模型是两种方式绑定反映在两者中。"; $scope.testingBind = "这是 BindData。你不能更改它，因为它与 html 绑定。在上面的文本框中我尝试使用绑定，但它不起作用，因为它是一种方式捆绑。”; }）; div输入{宽度：600px; }
区分黑白模型和绑定 < div data-ng-controller="testCTRL"> 模型数据：{{testingModel}}
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>
关注公众号
不定期副业成功案例分享
想领先一步获取最新的外包任务吗？
立即订阅相似问题
- AngularJS 中的数据绑定是如何工作的？
- AngularJS指令范围内的'@'和'='有什么区别？
- angular.service 与 angular.factory
- AngularJS：$observe 和 $watch 方法之间的区别
- 如何在 AngularJS 中使用 $scope.$watch 和 $scope.$apply？
- ng-if 和 ng-show/ng-hide 有什么区别
- angular-route 和 angular-ui-router 有什么区别？
- Angular ui-router 中 $state.transitionTo() 和 $state.go() 之间的区别
