【问题标题】：What's the difference between ng-model and ng-bindng-model 和 ng-bind 有什么区别
【发布时间】：2012-09-07 07:54:25
【问题描述】：

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

谁能告诉我它们有何不同以及何时应该使用其中一个而不是另一个？

【问题讨论】：

标签： angularjs angular-ngmodel ng-bind

【解决方案1】：

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

您只需要显示数据吗？

是：ng-bind（单向绑定）
编号：ng-model（双向绑定）

您是否需要绑定文本内容（而不是值）？

是：ng-bind
否：ng-model （你不应该在需要值的地方使用 ng-bind）

你的标签是 HTML <input>吗？

是：ng-model （你不能使用带有<input>标签的ng-bind）
编号：ng-bind

【讨论】：

【解决方案2】：

ng-model

AngularJS 中的

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

ng-bind

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

This example 会帮助你理解。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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-valid、ng-invalid、 ng-dirty、ng-pristine、ng-touched、ng-untouched）包括动画。
使用其父窗体注册控件。

ngBind

ngBind 属性告诉 Angular 将指定 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 元素的文本内容替换为给定表达式的值。

【讨论】：

虽然我很欣赏这种彻底的回应，但我之前选择的答案仍将保留，因为它提供了足够的信息来理解差异。

【解决方案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>

【讨论】：

【解决方案7】：

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

ng-model 旨在放置在表单元素中，并具有双向数据绑定（$scope --> view 和 view --> $scope），例如<input ng-model="val"/>.

【讨论】：

谢谢你。如果说 ng-bind 仅在要显示的值不需要用户输入的情况下才需要，这是一个公平的假设吗？并且，ng-modal 将用于执行此操作的值 ()。角度文档似乎暗示了这一点，但我在更好地理解之后。
@Marc 实际上 ng-bind 绑定的是元素的文本内容，而不是它的值。因此，它不能在元素中使用。
@Marc，在这种情况下，只需使用：
@JakubBarczyk {{::va}} 是一次性绑定，而不是一种方式。
@Wachburn 这是单向的，但更重要的是它是一次性的。在模型获取任何值后，它会停止观察模型的变化。因此，如果我们需要常规的单向绑定，它不能用作单向绑定。

【解决方案8】：

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

过滤器和格式化程序

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

过滤器（ng-bind）

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

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

或更简单地说：

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

注意uppercase is a built-in angular filter，虽然你也可以build your own filter。

格式化程序（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 只有一种方式绑定，从 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. 感谢您提供额外信息。有一个快速的答案（Tosh's）总是很好/很好，然后像你这样详细的为什么和如何回答，以便在推理/用例中学习/理解更多。