问题描述:

I need help with syntax.

I'm trying to create 2 user inputs stored as variables, that would be used within 3 separate controllers.

What I'm trying to do is create a table where each row is a controller in itself. Based on the numbers the user inputs, each row would calculate various fields.

'Standard Eye Level' and 'ImageAspectRatio' need to go into each of the three controllers but I'm not sure what the correct syntax would be.

Please take a look at my 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;

}

}]);

Any and all help is appreciated.

网友答案:

Alternately, you can also use $rootScope for sharing data between controllers

Script Code

 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) {
      });

Here's the link for the reference.

网友答案:

You should declare them as Global variables as explained below.

var myApp = angular.module('app', ['onsen']);
var Global_User = null;
var Global_Token = null;
var Global_IsLoggedIn = false;

myApp.controller('LoginController', function ($scope, $http, DatabaseService) {
    $scope.login = function (Username, Password) {
        $http.get(BaseServiceURL + "api/Token/GetToken?UserName=" + Username + "&Password=" + Password + "")
       .success(function (data) {
            DatabaseService.session.setItem('userName', Global_User);
            DatabaseService.session.setItem('token', Global_Token);
            LoginNavigator.pushPage('Home.html');
        }
    }
});

myApp.controller('HomeController', function ($scope, $http) {
    if (Global_IsLoggedIn == true) {
        $scope.greeting = "Hi " + nameCase(Global_User);
    }
});
网友答案:

If you want share data between controllers you should write the shareable code in services.

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
        }
}])

Now, in controller inject the service and call the function with the value to set to upgrade it from different controllers.

app.controller('myCtrl', ['$scope', 'myService', function($scope, myService){
   $scope.StandardEyeLevel = myService.getValues();
}])

This is not a good practice but just saying understanding purpose of how controllers can share data with services.

Note: replace below code with your plunker code. Observe console and output

<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>
相关阅读:
Top