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

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

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

2015-04-29 00:21:36

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

2016-12-29 13:19:07

我们可以使用ng-bind与<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>

2017-03-07 13:27:11

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

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

2015-04-29 00:21:36

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

过滤器和格式化器

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

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

推荐文章

最新文章

标签