过滤器＆amp;格式化

Question

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

有谁能告诉我他们的差异以及何时应该使用另一个？

Answer 1

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

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

Answer 2

tosh 的答案很好地解决了问题的核心。这里有一些额外的信息....

过滤器＆amp;格式化

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只有一种方式绑定，来自模型 - ＆gt; 视图。但是，ng-model可以绑定视图 - ＆gt; 模型，这意味着您可以允许用户更改模型的数据，并使用解析器您可以以简化的方式格式化用户的数据。这是什么样的：

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

Answer 3

ngModel

ngModel指令将输入，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负责：

将视图绑定到模型中，其他指令如输入，textarea或选择要求。
提供验证行为（即必填，数字，电子邮件，网址）。
保持控制状态（有效/无效，脏/原始，触及/未触及，验证错误）。
在元素上设置相关的css类（ng-valid，ng-invalid， ng-dirty，ng-pristine，ng-touching，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元素的文本内容给定表达式的值。

Answer 4

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

是否需要显示数据？

是：ng-bind （单向绑定）

否：ng-model （双向约束）

您是否需要绑定文字内容（而非价值）？

是：ng-bind

否：ng-model （您不应该在需要值的情况下使用ng-bind）

您的代码是HTML <input> 吗？

是：ng-model （您不能将ng-bind与<input>代码一起使用）

否：ng-bind

Answer 5

ng-model

ng-model directive in AngularJS is one of the greatest strength to bind the variables used in application with input components. This works as two way data binding. If you want to understand better about the two way bindings, you have an input component and the value updated into that field must be reflected in other part of the application. The better solution is to bind a variable to that field and output that variable whereever you wish to display the updated value throughoput the application.

ng-bind

ng-bind works much different than ng-model. ng-bind is one way data binding used for displaying the value inside html component as inner HTML. This directive can not be used for binding with the variable but only with the HTML elements content. Infact this can be used along with ng-model to bind the component to HTML elements. This directive is very useful for updating the blocks like div, span, etc. with inner HTML content.

This example would help you to understand.

Answer 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>

Answer 7

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

Answer 8

我们可以使用ng-bind和<p>来显示，我们可以使用ng-bind {{model}}的快捷方式，我们不能使用ng-bind和html输入控件，但是我们可以使用{{1}的快捷方式使用html输入控件。

ng-bind {{model}}

ng-model和ng-bind之间的区别是什么？

8 个答案:

过滤器＆amp;格式化

过滤器（ng-bind）

格式化程序（ng-model）

解析器

还有什么？

ngModel

ngBind