AngularJS 1.6.8出现Uncaught ReferenceError: $rootScope未定义问题求助

咱们来一步步拆解你遇到的Uncaught ReferenceError: $rootScope is not defined错误，以及代码里存在的几个核心问题：

1. 全局代码未通过依赖注入获取$rootScope #

你最后那段监听路由变化和页面卸载的代码，直接写在了全局作用域里，没有通过AngularJS的依赖注入机制获取$rootScope，这是导致错误的直接原因。

AngularJS的核心服务（包括$rootScope）不能直接在全局作用域调用，你需要把这段逻辑放到模块的run块中，通过依赖注入拿到$rootScope：

angular.module('myApp')
.run(function($rootScope) {
  $rootScope.$on("$routeChangeStart", function (event, next, current) {
    if (sessionStorage.restorestate == "true") {
      $rootScope.$broadcast('restorestate');
      sessionStorage.restorestate = false;
    }
  });

  window.onbeforeunload = function (event) {
    $rootScope.$broadcast('savestate');
  };
});

2. 组件配置项不符合AngularJS规范 #

你的contactComponent配置里有几个错误的属性：组件不存在$scope、$rootscope、factory这些配置项，正确的组件定义应该是这样：

angular.module('myApp')
.component('contactComponent', {
  restrict: 'E',
  templateUrl:'contact/contact.html',
  controller: contactController,
  controllerAs: 'vm'
});

服务是在控制器的依赖列表中注入的，不需要在组件配置里声明。

3. 服务未注册到AngularJS模块 #

你定义了userService函数，但没有把它注册成模块的服务，AngularJS无法识别并注入它。需要把它注册为factory（或service）：

angular.module('myApp')
.factory('userService', userService);

function userService($rootScope) {
  var service = {
    model: {
      name: '',
      email: '',
      query:''
    },
    SaveState: function () {
      // 你需求是存到localStorage，这里替换掉原代码的sessionStorage
      localStorage.userService = angular.toJson(service.model);
    },
    RestoreState: function () {
      // 加个默认值避免本地无数据时报错
      service.model = angular.fromJson(localStorage.userService) || { name: '', email: '', query:'' };
    }
  };

  $rootScope.$on("savestate", service.SaveState);
  $rootScope.$on("restorestate", service.RestoreState);

  return service;
};

4. 控制器的优化建议 #

既然你已经设置了controllerAs: 'vm'，可以尽量减少对$scope的依赖，使用更清晰的controllerAs语法：

function contactController($state, userService) {
  var vm = this;
  
  vm.navigate = function(home){
    $state.go(home);
  };
  
  vm.user = userService;
};

之后在模板里就可以通过vm.user.model.name这种方式绑定表单数据了。

把这些修改整合后，$rootScope未定义的错误就会消失，同时也能实现表单数据存入localStorage的功能。

内容的提问来源于stack exchange，提问作者user6488504