AngularJS - コントローラがng-modelオブジェクトのプロパティを読み取れません。

他のビューで再利用できるコントローラを作成したいと思います。 AngularJS - コントローラがng-modelオブジェクトのプロパティを読み取れません。

問題は、それは私がフィールド上に変更を加えない限り、ng-modelに設定されているプロパティを読み取ることができないので、私は、その、簡単な検証を行うことができないということである（このコントローラは、テンプレートとして使用されます）プロパティがそのオブジェクトに追加されます。

ng-init="object.fieldName = null"を私のビューのすべてのフィールドに入力したくないのは、それが良い方法ではないと思うからです。私は$watchを使用してみましたが、オブジェクトがまだある{}

に等しい。ここに私のコントローラの：

angular.module('practiceApp') 
.controller("CreateModalController", function($scope, items, defaultService) { 

    function initialize() { 
     $scope.object = {}; // <---- this should contain the ng-model object properties 
     $scope.defaultService = defaultService; 
     $scope.modalTitle = items.modalTitle; 

     $scope.$watch('object', function(newValue, oldValue) { 
      console.log(newValue); 
     }, true); 
    } 

    initialize(); 

});

は、ここに私の見解です：

<form name = "objectForm" 
     role = "form"> 
     <input type="text" 
      ng-model="object.firstName" 
      class="form-control" 
      placeholder="First Name" 
      ng-class="{'error-textfield': defaultService.isNotValid(object.firstName)}" 
      required> 

     <input type="text" 
      ng-model="object.lastName" 
      class="form-control" 
      placeholder="Last Name" 
      ng-class="{'error-textfield': defaultService.isNotValid(object.lastName)}" 
      required> 
</form>

電流出力=>object: {}

希望の出力=>object: {firstname: undefined, lastName: undefined}

出典

2017-04-15 KennethC

ビュー内で初期化関数を呼び出すことはありません。 –

「ビューで初期化関数を呼び出す」とはどういう意味ですか？上記のコードを更新して完成させましたが、コントローラの初期化関数を呼び出すだけです。 – KennethC

出力は最初に$scope.objectにプロパティがあると宣言していないため、最初はobject: {}になります。 <input>にテキストを入力してng-modelを更新して$scope.objectに更新する場合にのみ、firstNameまたはlastNameプロパティが表示されます。

あなたはそれが最初に表示させたい場合は、あなたが提供してきました所望の出力を持って、未定義の特性を有するように、コントローラに最初にあなたのオブジェクトを宣言：

サイドノートで

$scope.object = { 
    firstName: undefined, 
    lastName: undefined 
};

、あなたは必要はありませんルーティングでコントローラーを既に宣言している場合は、コントローラーのinitialize()関数を使用して自己初期化する必要があります。

また、AngularJS 1.5+コンポーネントを使用している場合は、$onInit()を使用できます。あなたが入力を開始した後、あなたは、姓と名の値が表示されます値を初期化したくない場合であっても

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<script> 
 
    
 
    
 
    var app = angular.module('practiceApp', []); 
 
    app.controller("CreateModalController", function($scope) { 
 

 
    function initialize() { 
 
     $scope.object = { 
 
      firstName: null, 
 
      lastName: null 
 
     }; // <---- this should contain the ng-model object properties 
 
     //$scope.defaultService = defaultService; 
 
     //$scope.modalTitle = items.modalTitle; 
 

 
     $scope.$watch('object', function(newValue, oldValue) { 
 
      console.log(newValue); 
 
     }, true); 
 
    } 
 

 
    initialize(); 
 

 
}); 
 
    
 
    
 
</script> 
 
<div ng-app="practiceApp" ng-controller="CreateModalController"> 
 
<form name="objectForm" 
 
     role="form"> 
 
     <input type="text" 
 
      ng-model="object.firstName" 
 
      class="form-control" 
 
      placeholder="First Name" 
 
      ng-class="{'error-textfield': defaultService.isNotValid(object.firstName)}" 
 
      required> 
 

 
     <input type="text" 
 
      ng-model="object.lastName" 
 
      class="form-control" 
 
      placeholder="Last Name" 
 
      ng-class="{'error-textfield': defaultService.isNotValid(object.lastName)}" 
 
      required> 
 
    
 
</form> 
 
    </div> 
 
</body> 
 
</html>

：

出典

2017-04-15 04:49:40

hmm ..その問題は、オブジェクト変数も他の作成機能でも使用されるためです。プロパティは静的であってはいけません。 – KennethC

'initialize（）関数'の場合、私はちょうど私のコードを整理したままにしておきたいのです – KennethC

@KennethC、ここでの目的がこれらの変数の検証であれば、AngularJSフォーム検証でテンプレートを検証してみませんか？そうすれば、コントローラは '$ scope.object'のプロパティを完全に知らなくても構いません。 –

は、作業コードを参照してください。ユーザーは入力フィールドに何も入力していませんが、 'オブジェクト'には値がありませんでしたので、何も表示されません。

質問がありますか？

出典

2017-04-15 05:01:27 paulpeters

'object'変数は静的変数ではありません。これはテンプレートとして使用するためです。 – KennethC

例： '{companyName：undefined、someProperties .....' – KennethC

あなたの実際の仕事は何ですか？なぜあなたはコンソールのすべてのフィールドを持つオブジェクトを見たいのですか？ – paulpeters

AngularJS - コントローラがng-modelオブジェクトのプロパティを読み取れません。

答えて

関連する問題