передать значение с одной страницы на другую, используя rootscope в angularJS

Логин.js:

app.controller('LoginFormController', ['$scope','$http','$rootScope', '$state', function($scope, $http, $rootScope, $state) {
    $scope.user = {};
    $scope.authError = null;
    $scope.login = function() {
      $scope.authError = null;

      var emailId = $scope.user.email;
      var password = $scope.user.password;
      $http({
        url: 'http://localhost:8090/login/login',
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'

        },
        data: 'email='+emailId+'&password='+password
        //data: {'email': $scope.user.email, 'password': $scope.user.password}
      }).then(function(response) {
        console.log(response.data);


        if (response.data.status == 'SUCCESS') {

          $scope.user = response.data.user.firstName;
          $rootScope.test = response.data.user.firstName;
          console.log("check: ",$rootScope.test)
          $state.go('app.dashboard');
        } else {
          //alert('invalid login');
          $scope.authError = 'Email or Password not right';
        }
      }, function(x) {
        $scope.authError = 'Server Error';
      })
    };
}])

Я сохранил значение в $ rootScope.test

Вот мой App.main.js:

'use strict';
  angular.module('app').controller('AppCtrl', ['$scope','$rootScope',
   function($scope, $rootScope) {

    $scope.user5 = $rootScope.test;

  }
 ]);

пытаюсь распечатать rootscope

Если я запускаю этот код, я сталкиваюсь с ошибкой $rootScope undefined в консоли. Как решить эту проблему


angularjs angular-ui-router rootscope
person Abdul khader    schedule 10.08.2018    source источник
comment
какой контроллер вы получаете ошибку   -  person Krishna Rathore    schedule 10.08.2018
comment
Вы пытались использовать $scope.test в main.js?   -  person Batu.Khan    schedule 10.08.2018
comment
Вместо хранения данных в $rootScope используйте службу. $rootScope устарел, и его использование усложнит переход на Angular 2+. См. также Часто задаваемые вопросы по AngularJS — $rootScope существует, но его можно использовать во зло   -  person georgeawg    schedule 10.08.2018

Ответы (5)


arrow_upward
3
arrow_downward

$rootScope является родителем всех $scope, каждая $scope получает копию данных $rootScope, к которым вы можете получить доступ, используя сам $scope.

Вот измененная версия https://jsfiddle.net/sedhal/g08uecv5/17/

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.obj = {
      "name":"user1",
      "bdate":"18/11/1994",
      "city":"Ahmedabad"
    };
})
.controller('myCtrl', function($scope, $rootScope) {
      $scope.data = $rootScope.obj;
})
.controller('myCtrl2', function($scope, $rootScope) {
     $scope.data1 = $rootScope.obj;
});
person sedhal soni    schedule 14.08.2018
comment
Это полезно для меня @sedhal. - person Harsh Panchal; 16.08.2018

arrow_upward
1
arrow_downward

Здесь есть полезный ответ на ваш вопрос: https://stackoverflow.com/a/18881189/9013688

Вместо того, чтобы напрямую передавать ваше свойство в $rootScope, вы можете сгенерировать событие, которое можно было бы прослушивать в другой части вашего приложения, например так:

if (response.data.status == 'SUCCESS') {
  $rootScope.$emit('user-logged', response.data.user.firstName)
}

А потом:

$rootScope.$on('user-logged', function(event, data){ do something with your data })

Или вы можете использовать службу, которая является хорошим способом обработки ваших данных во всех приложениях.

person SylvainF    schedule 10.08.2018
comment
$broadcast, $emit и $on устарели. Их использование усложнит переход на Angular 2+. - person georgeawg; 10.08.2018

arrow_upward
0
arrow_downward

Убедитесь, что вы прислушиваетесь к совету georgeawg, его предложение, по моему мнению, является лучшим способом реализации этой функции.

Я хочу предложить, что может быть не так с вашим примером.

Если вы видите, что в основном App.main.js вы дали объявление как

angular.module('app').controller(...

Но вы используете переменную app в login.js вот так.

app.controller(...

Который я предполагаю, что вы создаете где-то еще. Таким образом, установленное значение rootscope теряется, потому что есть два экземпляра одного и того же приложения.

Решением вашей проблемы будет объявление одной переменной app, в которой будет храниться экземпляр приложения. Таким образом, исправлением для вашего решения будет изменение App.main.js таким образом.

var app = angular.module('app');

app.controller(...

Также вам необходимо удалить любой другой произвольный var app = в вашем полном коде, так как они создадут несколько экземпляров одного и того же приложения.

Я надеюсь, что мое объяснение было понятным и правильным предположением, пожалуйста, попробуйте это решение!

person Naren Murali    schedule 10.08.2018

arrow_upward
0
arrow_downward

В свой основной js добавьте это.

app.run(['$rootScope', function($rootScope) {
  $rootScope.test; 
}]);
person Chaminda Jayanath Udawatte    schedule 10.08.2018

arrow_upward
0
arrow_downward

Вот пример реализации предложения Джорджа, который является правильным способом справиться с этим.

app.controller('LoginFormController', ['$scope','$http','$rootScope', '$state', 'stateService', function($scope, $http, $rootScope, $state, stateService) {
    var userFirstName = 'John';
    stateService.setFirstName('Bill');

    userFirstName = stateService.getFirstName(); 
    console.log(userFirstName); // result will be 'Bill'
}])

И служба, которую я обычно называю stateService

app.factory('stateService', [factory]);

function factory() {        
    var userFirstName = null;

    stateService.getFirstName = function() {
        return userFirstName;
    };

    stateService.setFirstName = function(firstName) {
        userFirstName = firstName;
    };

    return stateService;
}
person BShaps    schedule 11.08.2018