559

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

谁能告诉我它们有何不同以及何时应该使用另一种？

4

8 回答 8

839

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

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

于 2012-09-14T07:44:02.690 回答
142

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

过滤器和格式化程序

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

过滤器（ng-绑定）

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

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

或更简单地说：

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

请注意，这uppercase是一个内置的角度过滤器，尽管您也可以构建自己的过滤器。

格式化程序（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 />

这基本上ng-model等同于上面示例中的uppercase 过滤器所做的事情。ng-bind

解析器

现在，如果您打算允许用户更改 的值mystring怎么办？ng-bind只有一种方式绑定，来自model --> view。但是，可以从视图->模型ng-model绑定，这意味着您可以允许用户更改模型的数据，并且使用解析器可以以简化的方式格式化用户的数据。看起来是这样的：

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

ng-model使用格式化程序/解析器示例的实时 plunker

还有什么？

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

Angular 1.3 有一个新的 $validators 数组，你可以用它来代替$parsersor$formatters。

Angular 1.3 还具有对 ngModel 的 getter/setter 支持

于 2014-05-20T02:52:06.297 回答
30

模型

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），包括动画。
  • 将控件注册到其父窗体。

绑定

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 元素的文本内容。
于 2015-04-17T12:25:08.597 回答
9

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

你只需要显示数据吗？

  • 是：（ng-bind 单向绑定）

  • 否：（ng-model 双向绑定）

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

  • 是的：ng-bind

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

你的标签是 HTML<input>吗？

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

  • 不：ng-bind

于 2016-11-16T09:22:57.253 回答
6

ng模型

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

ng-绑定

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

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

于 2015-04-29T00:21:36.677 回答
5 

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>

于 2014-12-09T15:09:08.893 回答
2

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

于 2016-12-29T13:19:07.357 回答
1

我们可以使用 ng-bind with<p>来显示，我们可以使用快捷方式 for ng-bind {{model}}，我们不能使用 ng-bind 和 html 输入控件，但是我们可以使用快捷方式 forng-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>
于 2017-03-07T13:27:11.103 回答