ng-model和ng-bind有什么区别


554

目前,我正在学习AngularJS和我难以理解的区别ng-bindng-model

谁能告诉我它们的区别以及何时应使用另一种?

Answers:


831

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

ng-model用于放置在表单元素中,并具有双向数据绑定($ scope-> view and view-> $ scope),例如<input ng-model="val"/>


80
谢谢托什。假设仅在要显示的值不需要用户输入的情况下才需要ng-bind,这是一个合理的假设吗?并且,ng-modal将用于执行此操作的值(<input>)。有角度的文档似乎暗示了这一点,但是我已经有了更好的理解。
dubs 2012年

24
@Marc实际上ng-bind绑定元素的文本内容,而不是元素的值。因此,不能在<input>元素中使用它。
trogdor

21
@Marc,在这种情况下,只需使用:<input type =“ text” value =“ {{prop}}” />
John Kurlak 2013年

3
@JakubBarczyk {{:: va}}是一次绑定,而不是一种方式。
弗拉德·贝兹登

2
@Wachburn这是单向的,但更重要的是它是一次性的。模型取任何值后,它将停止监视模型更改。因此,如果我们需要常规的单向绑定,则不能将其用作单向绑定。
Ruslan Stelmachenko

141

tosh的答案很好地成为了问题的核心。这是一些其他信息。

筛选器和格式化程序

ng-bind并且ng-model都有其输出给用户之前,把数据的概念。为此,请ng-bind使用过滤器,而要ng-model使用格式化程序

过滤器(ng-bind)

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

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

或更简单地说:

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

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

格式化程序(ng-model)

要创建ng-model格式化程序,请创建一个require: 'ngModel'do指令,该指令允许该指令访问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模型 -> 视图只有一种方式绑定。但是,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格式化程序/解析器示例的实时调试器


还有什么?

ng-model还具有内置验证。只需修改您的$parsers$formatters函数即可调用ngModelcontroller.$setValidity(validationErrorKey, isValid)函数

Angular 1.3有一个新的$ validators数组,您可以使用它代替$parsersor进行验证$formatters

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


7
+ 1.感谢您的额外信息。快速回答(Tosh的回答),然后像您一样详细了解为什么和如何回答,以在推理/使用案例中学习/理解更多,总是很好的/很好的。
redfox05 2015年

30

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

  • 将视图绑定到模型中,其他指令(例如输入,textarea或select)需要该模型。
  • 提供验证行为(即必填,数字,电子邮件,URL)。
  • 保持控件的状态(有效/无效,脏/原始,被触摸/未被触摸,验证错误)。
  • 在元素上设置相关的CSS类(包括ng-valid,ng-invalid,ng-dirty,ng-pristine,ng-touched,ng-untouched),包括动画。
  • 用其父窗体注册该控件。

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元素的文本内容。

尽管我很欣赏这个详尽的回答,但我先前选择的答案将仍然存在,因为它仅提供了足够的信息来理解差异。
dubs 2015年

8

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


需要显示数据?

  • 是:(ng-bind 单向绑定)

  • 否:(ng-model 双向装订)

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

  • 是: ng-bind

  • 否:(ng-model 您不应该在需要值的地方使用ng-bind)

您的标签是HTML <input>吗?

  • 是:(ng-model 您不能将ng-bind与<input>tag一起使用)

  • 没有: ng-bind


6

ng模型

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

ng-bind

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

这个例子将帮助您理解。


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>


2

ngModel通常用于绑定变量的输入标签,我们可以从controller和html页面更改变量,但是ngBind用于在html页面中显示变量,我们可以仅从controller和html更改变量,只是显示变量。


1

我们可以使用ng-bind with <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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.