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

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

谁能告诉我它们有什么不同，什么时候应该用一个而不是另一个?

当前回答

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

过滤器和格式化器

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格式化器，你需要创建一个指令:'ngModel'，它允许该指令访问ngModel的控制器。例如:

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模型中大写过滤器在上面ng-bind示例中的作用。

解析器

现在，如果您计划允许用户更改mystring的值呢?Ng-bind只有一种绑定方式，从model- >视图来看。然而，ng-model可以从view- >模型绑定，这意味着您可以允许用户更改模型的数据，并且使用解析器可以以精简的方式格式化用户的数据。这是它的样子:

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的控制器。$setValidity(validationErrorKey, isValid)函数。

Angular 1.3有一个新的$validators数组，你可以用它来代替$parsers或$formatters进行验证。

Angular 1.3也支持ngModel的getter/setter

2014-05-20 02:52:06

其他回答

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

2016-12-29 13:19:07

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

将视图绑定到模型中，其他指令如输入，文本区域或选择要求。提供验证行为(即所需的，数字，电子邮件，url)。保持控件的状态(有效/无效，脏/原始，触碰/未碰，验证错误)。在元素上设置相关的css类(ng-valid, ng-invalid， Ng-dirty, ng-pristine, ng-touched, ng-touched)包括动画。将控件注册到其父窗体。

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元素的文本内容给定表达式的值。

2015-04-17 12:25:08

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

只需要显示数据吗?

是:ng-bind(单向绑定) No: ng-model(双向绑定)

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

是的:ng-bind No: ng-model(你不应该在需要value的地方使用ng-bind)

你的标签是HTML <input>?

是:ng-model(你不能使用ng-bind <input>标签) 没有:ng-bind

2016-11-16 09:22:57

Ng-bind有单向数据绑定($scope——>视图)。它有一个快捷键{{val}} 它显示范围值$scope。Val插入到HTML中，Val是一个变量名。

Ng-model旨在放在表单元素内部，并具有双向数据绑定($scope—>视图和view—> $scope)，例如<input Ng-model ="val"/>。

2012-09-14 07:44:02

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-09 15:09:08

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

推荐文章

最新文章

标签