Answers:
ng-bind具有单向数据绑定($ scope->视图)。它有一个快捷方式{{ val }}
,用于显示$scope.val
插入到html中的范围值,其中val
是变量名。
ng-model用于放置在表单元素中,并具有双向数据绑定($ scope-> view and view-> $ scope),例如<input ng-model="val"/>
。
tosh的答案很好地成为了问题的核心。这是一些其他信息。
ng-bind
并且ng-model
都有其输出给用户之前,把数据的概念。为此,请ng-bind
使用过滤器,而要ng-model
使用格式化程序。
使用ng-bind
,您可以使用过滤器来转换数据。例如,
<div ng-bind="mystring | uppercase"></div>
,
或更简单地说:
<div>{{mystring | uppercase}}</div>
请注意,这uppercase
是一个内置的角度滤镜,尽管您也可以构建自己的滤镜。
要创建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
还具有内置验证。只需修改您的$parsers
或$formatters
函数即可调用ngModel的controller.$setValidity(validationErrorKey, isValid)
函数。
Angular 1.3有一个新的$ validators数组,您可以使用它代替$parsers
or进行验证$formatters
。
该指令以优先级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负责:
该指令以优先级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负责:
ng模型
AngularJS中的ng-model指令是将应用程序中使用的变量与输入组件绑定的最大优势之一。这用作两种方式的数据绑定。如果您想更好地了解双向绑定,则有一个输入组件,并且更新到该字段的值必须反映在应用程序的其他部分。更好的解决方案是将变量绑定到该字段,并在希望通过应用程序显示更新值的任何位置输出该变量。
ng-bind
ng-bind的工作方式与ng-model截然不同。ng-bind是一种数据绑定方式,用于将html组件内的值显示为内部HTML。该伪指令不能用于与变量绑定,而只能用于HTML元素内容。实际上,它可以与ng-model一起使用,以将组件绑定到HTML元素。该指令对于使用内部HTML内容更新div,span等块非常有用。
这个例子将帮助您理解。
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>
我们可以使用ng-bind with <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>