在Angular JS中，如何在定义的函数之外检索$ scope值

Question

I have the Controller

function loginController($scope, $http, $cookieStore, $location) {
var token = $cookieStore.get('token');
var conId = $cookieStore.get('Cont_Id');
var exId = $cookieStore.get('ex_Id');
    $scope.log_me = function() {
    $scope.login_me = [];
    var login_un = $scope.uservals;
    var login_pwd = $scope.passvals;
    var logs_me = "api call here";
    $http.get(logs_me)
        .success(function(response) {
            $cookieStore.put('token', response.token);
            $cookieStore.put('ex_Id', response.ExId);
            $cookieStore.put('Cont_Id', response.contactId);
            $cookieStore.put('email', response.email);
            $cookieStore.put('name', response.name);
            $scope.log_sess = response;
            $scope.sess_id= response.ss_id;
            alert($scope.sess_id);
            if (response.status == "failure, invalid username or password") {
                $('.login_error').show();
                $('.login_error').html('Invalid username or password');
                $('.login_error').delay(4000).fadeOut();
                $('.loading').hide();
            } else {
                $location.path('/dashboard');
            }
        });
  }

}

I have used the above controller in my login page and it is working fine. Now i want to use the same controller in another template and retrieve the value "$scope.sess_id"

My Template is

 <div class="page" >
 <style>
 #report_loader object {
   width: 100%;
   min-height: 700px;
   width:100%;
   height:100%;
 }
 </style>
 <div class="loading"> </div>
 <section class="panel panel-default" data-ng-controller="loginController">
        <div class="panel-body" style=" position: relative;">
            <div id="report_loader" style="min-height:600px;">
            {{sess_id}}
             <script type="text/javascript">
                $("#report_loader").html('<object data="https://sampleurl/contact/reports/members/sorted_list.html?ss_id=' + sess_id+' />');
            </script>
            </div>
            </div>
    </section>
 </div>

I am unable to retrieve the value {{sess_id}} here. What should be done so that i can bring this value in my template

Answer 1

You're routing the user to the "dashboard" route upon successful log in. Even though it might feel like you're using the same "loginController" for both login and dashboard, it will be an entirely new instance of both the controller and $scope. Which is why the {{sess_id}} is not displaying on the dashboard template.

If you're following an MVC-like pattern of AngularJS, ideally you want to be creating a new controller for your dashboard template. See explanation: https://docs.angularjs.org/guide/controller#using-controllers-correctly

So, I would create a DashboardCtrl and share the sess_id between the two. There are plenty of examples out there of how to share data between controllers:

• You can use a factory: Share data between AngularJS controllers
• You can use $rootScope: How do I use $rootScope in Angular to store variables?

Hope it helps.

Answer 2

I would use the rootScope approach, but an easier way to do that is to simply create a 'global' variable.

In your main controller (not your login controller), define a global scope variable like this:

$scope.global = {};

Then in your login controller, modify your session id to use the global variable:

$scope.global.sess_id= response.ss_id;
alert($scope.global.sess_id);

Then in your html:

<div id="report_loader" style="min-height:600px;">
{{global.sess_id}}

It's simple and works like champ.

Answer 3

I would create a service :

services.sessionService = function(){

    var sessionID = null;

    this.setSessionID = function(id){
         sessionID = id; 
    }
    this.getSessionID = function(){
        return sessionID;
    }
}

then in your controller :

$scope.sess_id= response.ss_id;
alert($scope.sess_id);
sessionService.setSessionID( $scope.sess_id );

and in your dashboard controller :

$scope.sess_id = sessionService.getSessionID();

Answer 4

Approaches

Your question's answer has many approach. They are:

1. Using value or service , you can call it wherever your controllers need them.
2. Using $rootScope , this is very common and easy to use. Just define your $rootScope inside your main controller or whatever controller that called first and then you can call it from other controllers like any $scope behavior.
3. Using $controller service or usually called controller inheritance . Define this in controller function's parameter, then type $controller('ControllerNameThatIWantToInheritance', {$scope:$scope});

Maybe any other approach can be use to it. Each of them have strength and weakness.

Examples:

using value

.value('MyValue', {
  key: null
})

.controller('MyCtrl', function ($scope, MyValue) {
  $scope.myValue = MyValue;
})

you can modified MyValue from service too

using $rootScope

.controller('FirstCtrl', function ($scope, $rootScope) {
  $rootScope.key = 'Hello world!';
})

.controller('SecondCtrl', function ($scope, $rootScope) {
  console.log($rootScope.key);
})

will print 'Hello World', you can also use it in view <div>{{key}}</div>

using $controller

.controller('FirstCtrl', function ($scope) {
  $scope.key = 'Hello world!';
})

.controller('SecondCtrl', function ($scope, $controller) {
  $controller('FirstCtrl', {$scope:$scope});
})

Second controller will have $scope like first controller.

Conclusion

In your problem, you can split your controller for convenient. But if you dont' want to, try to define $scope.sess_id first. It will tell the Angular that your sess_id is a defined model, and angular will watch them (if you not define it first, it will be 'undefined' and will be ignored).

function loginController($scope, $http, $cookieStore, $location) {
var token = $cookieStore.get('token');
var conId = $cookieStore.get('Cont_Id');
var exId = $cookieStore.get('ex_Id');
$scope.sess_id = null                   //<- add this
$scope.log_me = function() {
  $scope.login_me = [];
  var login_un = $scope.uservals;
  var login_pwd = $scope.passvals;
  var logs_me = "api call here";
  $http.get(logs_me)
    .success(function(response) {
        $cookieStore.put('token', response.token);
        $cookieStore.put('ex_Id', response.ExId);
        $cookieStore.put('Cont_Id', response.contactId);
        $cookieStore.put('email', response.email);
        $cookieStore.put('name', response.name);
        $scope.log_sess = response;
        $scope.sess_id= response.ss_id;
        alert($scope.sess_id);
        if (response.status == "failure, invalid username or password") {
            $('.login_error').show();
            $('.login_error').html('Invalid username or password');
            $('.login_error').delay(4000).fadeOut();
            $('.loading').hide();
        } else {
            $location.path('/dashboard');
        }
    });
  }
}