javascript - コントローラーで未定義のNGモデル

Question

コントローラーから ng-model を読み取る際に「問題」が発生しています。

私はこれをしたい：

<input type="text" ng-model="code">
<button ng-click="setCode()">Login</button>

そして、私のコントローラーでは、次のようにその変数にアクセスします。

 $scope.setCode = function(){
    alert($scope.code);
  }

それが私がやりたいことですが、私のコード変数は未定義です。

これを機能させる2つの方法を見つけました：

1) 変数を引数として渡す

<input type="text" ng-model="code">
<button ng-click="setCode(code)">Login</button>

と：

$scope.setCode = function(code){
    alert(code);
  }

2) 変数をオブジェクトとして宣言する

<input type="text" ng-model="code.text">
<button ng-click="setCode()">Login</button>

と：

$scope.code = {text: 'foo'};

[...]

$scope.setCode = function(){
    console.log($scope.code);
  }

(私は2番目の方が好きです)

でも、どうしたらいいのか少し迷っています。オブジェクトのような私の ng-models を宣言しても大丈夫ですか? オブジェクトのようなすべてのモデルを宣言する必要がありますか?

この例 (私はIonicフレームワークを使用しています) では、入力のモデルを変更して [開始] ボタンを押すと、変数コードを値テストで宣言します。理論的には、アラートで新しい値を確認する必要があります。モデル。しかし、私が見ているのは古いものです。

ありがとう！

score 10 · Accepted Answer

プリミティブ型の代わりにオブジェクトモデルを使用して、plnkr の例を修正しました。

$scope.model = {};
$scope.model.code = "test";

$scope.setCode = function(){
    alert($scope.model.code);
}

plnkrを参照してください。

score 7 · Accepted Answer

最初の例は機能しています。これは plunkrです。

入力フィールドにテキストを入力せずにボタンを押すと、アラートが表示されますundefined。$scope.codeバインドされたフィールドに何かを入力した瞬間に定義されますng-model="code"。

コントローラーでもデフォルトに初期化できます。

$scope.code = 'my default value';

score 0 · Accepted Answer

Ionic のディレクティブは新しいスコープを作成します。コントローラーでコードオブジェクトを直接使用する場合は、ng-controller を、ルーター状態ではなく、HTML ページのion-content に設定する必要があります。

3 に答える 3