559

私は現在AngularJSを学習していますが、との違いを理解するのに苦労していng-bindますng-model。

誰かがそれらがどのように異なり、一方が他方の上にいつ使用されるべきかを教えてもらえますか？

4

8 に答える 8

839

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

ng-modelはフォーム要素内に配置することを意図しており、双方向のデータ バインディング ($scope --> ビューとビュー --> $scope) を備えて<input ng-model="val"/>います。

于 2012-09-14T07:44:02.690 に答える
142

toshの答えは、質問の核心にうまく到達します。ここにいくつかの追加情報があります....

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

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

フィルター (ng バインド)

では、フィルタng-bindを使用してデータを変換できます。例えば、

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

またはもっと簡単に：

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

独自のフィルターを作成することもできますがuppercase、組み込みの角度フィルターであることに注意してください。

フォーマッタ (ng モデル)

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または関数を変更して、ngModelの関数$formattersを呼び出すだけです。controller.$setValidity(validationErrorKey, isValid)

$parsersAngular 1.3 には、 orの代わりに検証に使用できる新しい $validators 配列$formattersがあります。

Angular 1.3 には ngModel の getter/setter サポートもあります

于 2014-05-20T02:52:06.297 に答える
30

ngModel

ngModel ディレクティブは、input、select、textarea (またはカスタム フォーム コントロール) をスコープのプロパティにバインドします。

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

  • ビューをモデルにバインドします。これは、input、textarea、select などの他のディレクティブが必要とします。
  • 検証動作の提供 (例: 必須、番号、電子メール、URL)。
  • コントロールの状態を維持します (有効/無効、ダーティ/手付かず、タッチ/未タッチ、検証エラー)。
  • アニメーションを含む要素 (ng-valid、ng-invalid、ng-dirty、ng-pristine、ng-touched、ng-untouched) に関連する CSS クラスを設定します。
  • コントロールを親フォームに登録します。

ngBind

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

このディレクティブは、優先度レベル 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 は以下を担当します。

  • 指定された HTML 要素のテキスト コンテンツを、指定された式の値に置き換えます。
于 2015-04-17T12:25:08.597 に答える
6

ng-モデル

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

ng バインド

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

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

于 2015-04-29T00:21:36.677 に答える
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>

于 2014-12-09T15:09:08.893 に答える