回答:
ng-bindには一方向のデータバインディングがあります（$ scope-> view）。変数名であるhtmlに挿入され{{ val }}
たスコープ値を表示するショートカットがあります。$scope.valval
ng-modelはフォーム要素の内部に配置することを目的としており、双方向のデータバインディング（$ scope->ビューおよびビュー-> $ 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'、するディレクティブを作成します。これにより、そのディレクティブが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には、$parsersまたはの代わりに検証に使用できる新しい$ validators配列があります$formatters。
このディレクティブは優先度1で実行されます。
ジャバスクリプト
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で実行されます。
ジャバスクリプト
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-model
AngularJSのng-modelディレクティブは、アプリケーションで使用される変数を入力コンポーネントにバインドする最大の強みの1つです。これは双方向のデータバインディングとして機能します。双方向バインディングについて理解を深めるには、入力コンポーネントがあり、そのフィールドに更新された値をアプリケーションの他の部分に反映する必要があります。より良い解決策は、変数をそのフィールドにバインドし、アプリケーションで更新された値を表示する場所に変数を出力することです。
ng-bind
ng-bindの動作はng-modelとは大きく異なります。ng-bindは、htmlコンポーネント内の値を内部HTMLとして表示するために使用される一方向のデータバインディングです。このディレクティブは、変数とのバインドには使用できませんが、HTML要素のコンテンツにのみ使用できます。実際には、これをng-modelとともに使用して、コンポーネントをHTML要素にバインドできます。このディレクティブは、div、spanなどのブロックを内部HTMLコンテンツで更新するのに非常に役立ちます。
この例は、理解するのに役立ちます。
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><p>表示にng-bindを使用できます。のショートカットを使用できますng-bind {{model}}。html入力コントロールでng-bindを使用できませんが、html入力コントロールでを使用できng-bind {{model}}ます。
<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
Hello {{name}}
<p ng-bind="name"</p>