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

Question

目前，我正在学习AngularJS和我难以理解的区别ng-bind和ng-model。谁能告诉我它们的区别以及何时应使用另一种？

Answer 1

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函数即可调用ngModel的controller.$setValidity(validationErrorKey, isValid)函数。

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

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