AngularJs - 複数のコントローラで使用される1つの変数/ 1つの入力を作成するにはどうすればよいですか？

私は構文に関して助けが必要です。AngularJs - 複数のコントローラで使用される1つの変数/ 1つの入力を作成するにはどうすればよいですか？

私は変数として格納された2つのユーザー入力を作成しようとしています。これは3つの別々のコントローラー内で使用されます。

私がしようとしているのは、各行がコントローラであるテーブルを作成することです。ユーザーが入力した数値に基づいて、各行はさまざまなフィールドを計算します。

「標準アイレベル」と「ImageAspectRatio」は、3つのコントローラのそれぞれに入る必要がありますが、正しい構文がどうなるかわかりません。

私plunkrをご覧ください：https://plnkr.co/edit/ptHhwmaKdeB4CfYEvdlL?p=preview

var BDMApp = angular.module('BDMApp', []); 
var StandardEyeLevel = Number(ctrl.StandardEyeLevel || 0); 
var ImageAspectRatio = Number(ctrl.ImageAspecRatio || 0); 

BDMApp.controller('BDMFarViewController', [function() { 
var ctrl = this; 
ctrl.BDMCalc = function() { 
    var BDMFarViewImgHeight = Number(ctrl.BDMFarViewImgHeight || 0); 
    var BDMFarViewDistFloor = Number(ctrl.BDMFarViewDistFloor || 0); 
    var BDMFarViewMinPerElm = Number(ctrl.BDMFarViewMinPerElm || 0); 
    ctrl.BDMFarViewImgOffSetAns = BDMFarViewDistFloor - StandardEyeLevel; 
    ctrl.BDMFarViewImgWidthAns = BDMFarViewImgHeight * ImageAspectRatio; 
    ctrl.BDMFarViewFarViewAns = BDMFarViewDistFloor * BDMFarViewMinPerElm * 200; 
    ctrl.BDMFarViewViewRatAns = ctrl.BDMFarViewFarViewAns/BDMFarViewDistFloor; 
    ctrl.BDMFarViewVVFAns = BDMFarViewDistFloor + ctrl.BDMFarViewImgOffSetAns; 
    ctrl.BDMFarViewCloseViewAns = ctrl.BDMFarViewVVFAns * 1.732; 
    ctrl.BDMFarViewViewRatAns = ctrl.BDMFarViewCloseViewAns/BDMFarViewImgHeight; 
    ctrl.BDMFarviewNominalViewDepthAns = ctrl.BDMFarViewFarViewAns - ctrl.BDMFarViewCloseViewAns; 
} 
}]);

任意およびすべてのヘルプは大歓迎です。

出典

2016-12-21 kingsman

複数のコントローラ間でデータを共有する場合は、$ rootScopeを使用できます。しかし、それはお勧めしません。そのため、サービスを使用してデータを格納し、複数のコントローラで使用します。 – SaiUnique

コントローラー間でデータを共有する場合は、共有可能コードをサービスに書き込む必要があります。

myService.js

app.service('myService', [function(){ 
     var self = this; 
     self.img; 
     self.img.StandardEyeLevel; 
     self.img.ImageAspectRatio; 
     self.getValues = function(passedVal){ 
      self.img[any one of the img property] = passedVal; 
      return self.img; 
     } 

     return { 
      'getValues': self.getValues 
     } 
}])

は今、コントローラにサービスを注入し、異なるコントローラからそれをアップグレードするために設定した値との関数を呼び出します。

これは、コントローラがサービスとデータをどのように共有できるかの理解の目的を言っているに過ぎません。

注：のコードをあなたのプランナーコードに置き換えてください。代わりに、コンソール出力

<head> 
    <title>Share data between controllers in AngularJs with $rootScope</title> 
    <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script> 
    <script> 
     var app = angular.module("myApp", []); 
     app.run(function($rootScope) { 
     $rootScope.userData = {}; 
     $rootScope.userData.firstName = ""; 
     $rootScope.userData.lastName = ""; 
     }); 
     app.controller("firstController", ["myService", "$scope", "$rootScope", function(myService, $scope, $rootScope) { 
     $scope.userData.firstName = myService.getVal("Hello", ''); 
     console.log('aaaaaaaaaa', $scope.userData.firstName) 
     }]); 
     app.controller("secondController", ["myService", "$scope", "$rootScope", function(myService, $scope, $rootScope) { 
     $scope.userData.lastName = myService.getVal('', "World"); 
     console.log('aaaaaaaaaa', $scope.userData.lastName) 
     }]); 
     app.service('myService', function(){ 
     var self = this; 
     self.names = {}; 
     self.getVal = function(fname, lname){ 
      if(fname){ 
      self.names.fname = fname; 
      } 
      if(lname){ 
      self.names.lname = lname; 
      } 
     return self.names; 
     } 
     return self; 
     }) 
    </script> 
</head> 

<body ng-app="myApp"> 
    <div ng-controller="firstController"> 
     <br> 
     <input type="text" ng-model="userData.firstName.fname"> 
     <br> 
     <input type="text" ng-model="userData.lastName.lname"> 
    <hr> 
    </div> 
    <div ng-controller="secondController"> Username: <b> {{userData.firstName.fname}}</b> 
    <br> 
    Lastname:<b>{{userData.lastName.lname}}</b>  </div> 
</body> 

</html>

出典

2016-12-21 05:15:20

私の変数名を使って説明してくれてありがとう。私はそれを自分で試してみましたが、私はそれを働かせるのに苦労しています。これをフロントエンドにどうやって結び付けるのですか？見せてもらえますか？ https://plnkr.co/edit/yWV3KhNnLvgcuOABJm9M?p=preview – kingsman

私は自分の答えを編集しました。それをあなたのプランナーにコピーし、出力を観察してください –

を守って、あなたはまた、コントローラ

スクリプトコード

var app = angular.module("myApp", []); 
     app.run(function($rootScope) { 
     $rootScope.userData = {}; 
     $rootScope.userData.firstName = "ram"; 
     $rootScope.userData.lastName = "gopal"; 
     }); 
     app.controller("firstController", function($scope, $rootScope) { 
     }); 
     app.controller("secondController", function($scope, $rootScope) { 
     });

間でデータを共有するための$rootScopeを使用することができますここでは参考のためにlinkです。

出典

2016-12-21 06:17:29

グローバル変数を次のようにと宣言してください。

出典

2016-12-21 06:42:44

こんにちは、ありがとう。申し訳ありませんが、上のサンプルコードは私にさらなる質問を残しています。私のコードを使ってこれを実装する方法を教えてくれますか？グローバル変数は私が作成したいものですが、フロントエンドでそれをどのように結びつけるべきかはわかりませんので、ユーザーはグローバル変数にどのような値が入るかを決定します。再リンクはここ。どうもありがとうございます：https://plnkr.co/edit/ptHhwmaKdeB4CfYEvdlL?p=preview – kingsman

AngularJs - 複数のコントローラで使用される1つの変数/ 1つの入力を作成するにはどうすればよいですか？

答えて

関連する問題