Angularjs複数のコントローラ、最初のものだけが動作します

Question

私はangularjs 1.5.8を使用して、基本的に方程式でExcelテーブルを模倣しています。 2つの出力に影響する2つの入力を必要とする3つの行があります。私は各行のコントローラを構築しているので、複数のコントローラを含めるようにスクリプトを書く方法については苦労しています。私のスクリプトで2番目と3番目のコントローラをコメントアウトすると、最初の行はうまく動作します。コメントの行がない場合、何も機能しません。私はとても近いと思うが、どこが間違っているのか分からない。どんな助けもありがとう。ここで

は作業のコントローラである：ここでは

angular.module('ADMApp', []) .controller('ADMFarViewController', [function() { var ctrl = this; ctrl.ADMCalc = function() { var ADMFarViewImgHeightvar = Number(ctrl.ADMFarViewImgHeightvar || 0); var ADMFarViewVertPixvar = Number(ctrl.ADMFarViewVertPixvar || 0); ctrl.ADM_FarViewFarthestViewer_ans = (ADMFarViewImgHeightvar * 3438)/ ADMFarViewVertPixvar; ctrl.ADM_FarViewViewRat_ans = ctrl.ADM_FarViewFarthestViewer_ans/ADMFarViewImgHeightvar; } }]);

は私plunkerです：https://plnkr.co/edit/6nKEPCeOqx7zEFx5M5WZ

Answer 1

は、あなたのモジュールたびに再定義しないでください。

// Code goes here 
var ADMApp = angular.module('ADMApp', []); 

ADMApp.controller('ADMFarViewController', [function() { 
    var ctrl = this; 
    ctrl.ADMCalc = function() { 
     var ADMFarViewImgHeightvar = Number(ctrl.ADMFarViewImgHeightvar || 0); 
     var ADMFarViewVertPixvar = Number(ctrl.ADMFarViewVertPixvar || 0); 
     ctrl.ADM_FarViewFarthestViewer_ans = (ADMFarViewImgHeightvar * 3438)/ADMFarViewVertPixvar; 
     ctrl.ADM_FarViewViewRat_ans = ctrl.ADM_FarViewFarthestViewer_ans/ADMFarViewImgHeightvar; 
    } 
}]); 



ADMApp.controller('ADMMinImgController', [function() { 
     var ctrl = this; 
     ctrl.ADMCalc = function() { 
      var ADM_MinImgHeightVertPix_var = Number(ctrl.ADM_MinImgHeightVertPix_var || 0); 
      var ADM_MinImgHeightFarthestViewer_var = Number(ctrl.ADM_MinImgHeightFarthestViewer_var || 0); 
      ctrl.ADM_MinImgHeightImageHeight_ans = (ADM_MinImgHeightVertPix_var * ADM_MinImgHeightFarthestViewer_var)/3438; 
      ctrl.ADM_MinImgHeightViewRat_ans = ADM_MinImgHeightFarthestViewer_var/ctrl.ADM_MinImgHeightImageHeight_ans; 
     } 
}]); 


ADMApp.controller('ADMMaxImgController', [function() { 
     var ctrl = this; 
     ctrl.ADMCalc = function() { 
      var ADM_MaxImgImageHeight_var = Number(ctrl.ADM_MaxImgImageHeight_var || 0); 
      var ADM_MaxImgFarthestViewer_var = Number(ctrl.ADM_MaxImgFarthestViewer_var || 0); 
      ctrl.ADM_MaxImgVertPix_ans = (ADM_MaxImgImageHeight_var * 3438)/ADM_MaxImgFarthestViewer_var; 
      ctrl.ADM_MaxImgViewRat_ans = ADM_MaxImgFarthestViewer_var/ADM_MaxImgImageHeight_var; 
     } 
}]); 

Answer 2

angular.module('ADMApp', []) 

コードのその行がモジュール 'ADMApp' を定義します。あなたのコードではこの行が3回浮かれているので、同じモジュールを3回定義し、前に定義したコントローラーを含む前の定義を上書きします。

変数に保存するか、angular.module('ADMApp')を使用して、以前に定義したモジュールへの参照を取得します。