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

Question

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

任何人都可以告诉我他们的差异,以及何时应该使用另一个？

Answer 1

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

ng-model旨在放在表单元素内部,并具有双向数据绑定($ scope - > view和view - > $ scope),例如<input ng-model="val"/>.

Answer 2

托什的回答很好地解决了问题的核心.这是一些额外的信息....

过滤器和格式化程序

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'该指令允许该指令获得对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函数来调用ngModel的controller.$setValidity(validationErrorKey, isValid)功能.

Angular 1.3有一个新的$ validators数组,您可以将其用于验证而不是$parsers或$formatters.

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

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

• 将视图绑定到模型中,其他指令如input,textarea或select require.
• 提供验证行为(即必需,数字,电子邮件,网址).
• 保持控件的状态(有效/无效,脏/原始,触摸/未触摸,验证错误).
• 在元素上设置相关的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-模型

AngularJS中的ng-model指令是将应用程序中使用的变量与输入组件绑定的最大优势之一.这适用于双向数据绑定.如果您想更好地理解双向绑定,则需要输入组件,并且更新到该字段的值必须反映在应用程序的其他部分中.更好的解决方案是将变量绑定到该字段,并输出该变量,以便通过应用程序显示更新的值.

NG-绑定

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

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

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>