提问



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


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

最佳参考


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


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

其它参考1


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


过滤器&格式化



ng-bindng-model都具有在为用户输出数据之前转换数据的概念。为此,ng-bind使用过滤器,而ng-model使用格式化程序。


过滤器(ng-bind)



使用ng-bind,您可以使用过滤器来转换数据。例如,


<div ng-bind="mystring | uppercase"></div>


或更简单地说:


<div>{{mystring | uppercase}}</div>


请注意,uppercase是一个内置的角度滤波器,但您也可以构建自己的滤波器。[54] [55]


formatter(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 />


这基本上是uppercase 过滤器在上面的ng-bind示例中所做的ng-model等价物。





解析器



现在,如果您计划允许用户更改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格式化程序/解析器示例的实时插件播放 [56]





还有什么?



ng-model也有内置验证。只需修改$parsers$formatters功能即可调用 ngModel s controller.$setValidity(validationErrorKey, isValid)功能。[57]


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


Angular 1.3还具有针对ngModel的getter/setter支持 [59]

其它参考2


ngModel


ngModel指令将输入,select,textarea(或自定义表单控件)绑定到作用域上的属性。[60]


该指令在优先级1执行。


示例 Plunker [61]


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 require。

  • 提供验证行为(即必填,数字,电子邮件,网址)。

  • 保持控制状态(有效/无效,脏/原始,
    触及/未触及,验证错误)。

  • 在元素上设置相关的css类(ng-valid,ng-invalid,
    ng-dirty,ng-pristine,ng-touching,ng-untouched)包括
    动画。

  • 使用其父表单注册控件。



ngBind


ngBind属性告诉Angular将指定HTML元素的文本内容替换为给定表达式的值,并在该表达式的值更改时更新文本内容。[62]


该指令在优先级0执行。


示例 Plunker [63]


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


其它参考3


如果您在使用 ng-bind ng-model 之间犹豫不决,请尝试回答以下问题:[64] [65]






  您需要显示数据吗?




  • 是:ng-bind (单向绑定)

  • 否:ng-model (双向绑定)




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




  • 是:ng-bind

  • 否:ng-model (你不应该在需要值的地方使用ng-bind)




  您的代码是HTML <input> 吗?




  • 是:ng-model (您不能将ng-bind与输入标签一起使用)

  • 否:ng-bind


其它参考4


NG-模型


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


纳克绑定


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


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

其它参考5




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>



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

其它参考6


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