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

时间：2014-12-09 08:00:14

标签： javascript jquery html angularjs

我有控制器

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}}。应该做什么，以便我可以在我的模板中带来这个值

4 个答案:

答案 0 :(得分：0)

您将用户路由到＆＃34;信息中心＆＃34;成功登录后的路线。即使您可能觉得您使用相同的＆＃34; loginController＆＃34;对于登录和仪表板，它将是控制器和$ scope的全新实例。这就是{{sess_id}}没有显示在仪表板模板上的原因。

如果你正在遵循类似MVC的AngularJS模式，理想情况下你想要为你的仪表板模板创建一个新的控制器。请参阅说明：https://docs.angularjs.org/guide/controller#using-controllers-correctly

所以，我会创建一个DashboardCtrl并在两者之间共享sess_id。有很多关于如何在控制器之间共享数据的例子：

希望它有所帮助。

答案 1 :(得分：0)

我会使用rootScope方法，但更简单的方法是简单地创建一个'全局'变量。

在主控制器（不是您的登录控制器）中，定义一个全局范围变量，如下所示：

$scope.global = {};

然后在 login 控制器中，修改会话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}}

这很简单，就像冠军一样。

答案 2 :(得分：0)

我会创建一个服务：

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();

答案 3 :(得分：0)

途径

您的问题的答案有很多方法。他们是：

  1. 使用value或service，您可以在controllers需要的地方拨打电话。
  2. 使用$rootScope，这是非常常见且易于使用的。只需在$rootScope或首先调用的控制器中定义main controller，然后就可以从其他控制器中调用它，例如任何$scope行为。
  3. 使用$controller服务或通常称为controller inheritance。在控制器功能的参数中定义它，然后键入$controller('ControllerNameThatIWantToInheritance', {$scope:$scope});

    4. 也许可以使用任何其他方法。他们每个人都有力量和弱点。

    示例：

    使用值

    .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会观察它们（如果你没先定义它，它将是'未定义的'并将被忽略）。

    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');
        }
    });
  }
}
相关问题
最新问题