ng之间的区别是什么?

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

谁能告诉我他们有什么不同,什么时候应该使用另一个?


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

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


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

过滤器和格式器

ng-bindng-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在上面的ng-bind示例中等同于大uppercase滤器所做的事情。


解析器

现在,如果您打算允许用户更改mystring的值,该怎么办? ng-bind只有一种方式绑定,从model - > view 。 但是, 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函数即可调用ngModelcontroller.$setValidity(validationErrorKey, isValid) setValidity controller.$setValidity(validationErrorKey, isValid)函数。

Angular 1.3有一个新的$ validators数组 ,您可以用它来验证,而不是$parsers$formatters

Angular 1.3对ngModel也有getter / setter支持


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或select需要)。
  • 提供验证行为(即必需的,号码,电子邮件,网址)。
  • 保持控制状态(有效/无效,脏/原始,接触/未触摸,验证错误)。
  • 在元素上设置相关的CSS类(包括动画)(ng-valid,ng-invalid,ng-dirty,ng-pristine,ng-touch,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元素的文本内容。
  • 链接地址: http://www.djcxy.com/p/77705.html

    上一篇: What's the difference between ng

    下一篇: unable to fire valid request using angular and spring