在Angular JS中，如何在定義的函數之外檢索$ scope值

Question

我有控制器

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

}

我在登錄頁面中使用了上面的控制器，它工作正常。 現在，我想在另一個模板中使用相同的控制器，並檢索值“ $ scope.sess_id”

我的模板是

 <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>

我無法在此處檢索值{{sess_id}}。 應該怎么做才能將這個值帶入模板

Answer 1

您將在成功登錄后將用戶路由到“儀表板”路由。即使您可能感覺登錄名和儀表板都使用相同的“ loginController”，但這將是控制器和控制器的全新實例。 $ scope。 這就是{{sess_id}}未顯示在儀表板模板上的原因。

如果您遵循的是類似MVC的AngularJS模式，則理想情況下，您希望為儀表板模板創建一個新的控制器。 參見說明： https ： //docs.angularjs.org/guide/controller#using-controllers-正確

因此，我將創建一個DashboardCtrl並在兩者之間共享sess_id。 關於如何在控制器之間共享數據有很多示例：

• 您可以使用工廠： 在AngularJS控制器之間共享數據
• 您可以使用$ rootScope： 如何在Angular中使用$ rootScope存儲變量？

希望能幫助到你。

Answer 2

我將使用rootScope方法，但更簡單的方法是創建一個“全局”變量。

在主控制器（而不是登錄控制器）中，定義一個全局范圍變量，如下所示：

$scope.global = {};

然后在登錄控制器中，修改會話ID以使用全局變量：

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

然后在您的html中：

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

它很簡單，就像冠軍。

Answer 3

我會創建一個服務：

services.sessionService = function(){

    var sessionID = null;

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

然后在您的控制器中：

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

並在您的儀表板控制器中：

$scope.sess_id = sessionService.getSessionID();

Answer 4

途徑

您問題的答案有很多方法。 他們是：

1. value或service ，您可以在controllers需要它們的任何地方調用它。
2. 使用$rootScope ，這是非常常見且易於使用的。 只需在main controller或首先調用的任何控制器中定義$rootScope ，然后您就可以像其他其他$scope行為一樣從其他控制器中調用它。
3. 使用$controller服務或通常稱為controller inheritance 。 在控制器函數的參數中定義它，然后鍵入$controller('ControllerNameThatIWantToInheritance', {$scope:$scope});

也許可以使用任何其他方法。 他們每個人都有優點和缺點。

例子：

使用價值

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

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

您也可以通過服務修改MyValue

使用$rootScope

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

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

將打印“ Hello World”，您也可以在視圖<div>{{key}}</div>使用它

使用$controller

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

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

第二個控制器將像第一個控制器一樣具有$scope 。

結論

在遇到問題時，可以拆分控制器以方便使用。 但是，如果您不想這樣做，請嘗試首先定義$scope.sess_id 。 它會告訴Angular您的sess_id是已定義的模型，而angular會監視它們（如果您不首先定義它，它將是'undefined'並將被忽略）。

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