web-dev-qa-db-ja.com

Ng-modelとng-bindの違いは何ですか

私は現在AngularJSを学んでいて、ng-bindとng-modelの違いを理解するのが困難です。

誰がそれらがどのように違うのか、そして一方が他方に対して使われるべき時を私に言うことができますか？

angularjsangular-ngmodelng-bind
542
dubs

ng-bind は一方向のデータバインディングを持ちます（$ scope - > view）。これには、valが変数名であるhtmlに挿入されたスコープ値{{ val }}を表示するショートカット$scope.valがあります。

ng-model はフォーム要素の中に置くことを意図しており、双方向のデータバインディングを持っています（$ scope - > viewとview - > $ scope）。 <input ng-model="val"/>。

817
Tosh

toshの答えは問題の核心にうまく入ります。追加情報を次に示します。..

フィルターとフォーマッター

ng-bindとng-modelはどちらも、ユーザーに出力する前にデータを変換するという概念を持っています。そのために、ng-bindはfiltersを使用し、ng-modelはformattersを使用します。

フィルター（ng-bind）

ng-bindを使用すると、filterを使用してデータを変換できます。例えば、

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

またはもっと簡単に：

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

uppercaseは組み込みのangularフィルター ですが、 独自のフィルターを構築 することもできます。

フォーマッタ（ngモデル）

Ngモデルフォーマッタを作成するには、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の例でuppercasefilterが行っていることと同等のng-bindです。

パーサー

ここで、ユーザーがmystringの値を変更できるようにする場合はどうなりますか？ ng-bindには、model-> viewからの1つの方法のバインディングのみがあります。ただし、ng-modelはview-> modelからバインドできます。つまり、ユーザーにモデルのデータの変更を許可し、parser合理化された方法でユーザーのデータをフォーマットできます。これは次のようなものです。

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配列があります$parsersまたは$formattersの代わりに検証に使用できます。

Angular 1.3にはngModelのゲッター/セッターサポートもあります

140
Gil Birman

ngModel

ngModelディレクティブは、入力、選択、テキストエリア（またはカスタムフォームコントロール）をスコープ上のプロパティにバインドします。

このディレクティブは優先度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は次のことを担当します。

  • ビューをモデルにバインドします。入力、textarea、selectなどの他のディレクティブには必須です。
  • 検証動作（必須、番号、電子メール、URL）を提供します。
  • コントロールの状態を維持する（有効/無効、ダーティ/元の状態、タッチ/未処理、検証エラー）。
  • アニメーションを含む、関連するCSSクラスを要素に設定する（ng-valid、ng-invalid、ng-dirty、ng-touched、ng-untouched）。
  • コントロールをその親フォームに登録します。

ngBind

ngBind属性はAngularに、指定されたHTML要素のテキストコンテンツを特定の式の値で置き換え、その式の値が変更されたときにテキストコンテンツを更新するように指示します。

このディレクティブは優先度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が担当します。

  • 指定されたHTML要素のテキストコンテンツを、指定された式の値に置き換えます。
29
Subodh Ghulaxe

ng-bind または ng-model の使用を躊躇している場合は、次の質問に答えてください。

only display dataが必要ですか？

  • はい：ng-bind（一方向バインディング）

  • いいえ：ng-model（双方向バインディング）

テキストコンテンツをバインドする必要がありますか （値ではありません）

  • はい：ng-bind

  • いいえ：ng-model（値が必要な場合はng-bindは使用しないでください）

あなたのタグはHTML<input>ですか？

  • はい：ng-model（<input>タグと一緒にng-bindを使用することはできません）

  • いいえ：ng-bind

8
Mistalis

ng-model

angularJSのng-modelディレクティブは、アプリケーションで使用される変数を入力コンポーネントにバインドする最大の強みの1つです。これは双方向のデータバインディングとして機能します。双方向バインディングについてよりよく理解したい場合は、入力コンポーネントがあり、そのフィールドに更新された値をアプリケーションの他の部分に反映させる必要があります。より良い解決策は、そのフィールドに変数をバインドし、アプリケーションに出力して更新された値を表示したいときはいつでもその変数を出力することです。

ng-bind

ng-bindはng-modelとはかなり違った働きをします。 ng-bindは、HTMLコンポーネント内の値を内部HTMLとして表示するために使用される一方向のデータバインディングです。このディレクティブは、変数とのバインディングには使用できませんが、HTML要素のコンテンツとのバインディングにのみ使用できます。実際には、これをng-modelとともに使用して、コンポーネントをHTML要素にバインドできます。このディレクティブは、div、spanなどのブロックを内部のHTMLコンテンツで更新するのに非常に便利です。

この例 を理解するのに役立ちます。

6
Krishna
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>
5
ramanathan

ngModel 通常はコントローラやHTMLページから変数を変更することができる変数をバインドするための入力タグに使用しますが、 ngBind htmlページに変数を表示するために使用し、単にコントローラからHTML変数を変更することができます変数。

2
user7339584

表示には<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>
1
Vikash Ranjan Jha