web-dev-qa-db-ja.com

コントローラーで未定義のNgモデル

コントローラからngモデルを読み取る「問題」があります。

私はこれをしたい：

<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モデルをオブジェクトのように宣言しても大丈夫ですか？オブジェクトのようなすべてのモデルを宣言する必要がありますか？

編集： 問題のPlnkrです

この例（ Ionic フレームワークを使用しています）では、入力でモデルを変更し、開始ボタンを押すと、値テストで変数コードを宣言します。理論的には、モデルの新しい値を警告します。しかし、私が見るのは古いものです。

ありがとう！

javascriptangularjsionic-framework
20
Mati Tucci

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

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

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

plnkr を参照してください。

10
xi.lin

最初の例は動作しています こちらはplunkrです 。

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

コントローラーでデフォルトに初期化することもできます：

$scope.code = 'my default value';
7
nilsK

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

0
jet ma