AngularJS控制器变量统一存储复用及相关问题咨询

嘿，我来帮你把分散在多个控制器里的$scope/$rootScope变量统一到公共Service里，同时解决你提到的两个问题！

一、重构公共Service（commonService.js） #

首先修正你原来Service里的语法错误，我们把它改成按页面提供初始化方法的结构，这样每个控制器可以按需调用对应页面的变量初始化逻辑：

abbvieapp.factory('commonService', ['$rootScope', '$state', function($rootScope, $state) {
    // 初始化第一页变量
    var initFirstPage = function(scope) {
        $rootScope.page = "first-page";
        $rootScope.previous_page = "";
        $rootScope.getSearchCard = [];
        scope.search = '';
    };

    // 初始化第二页变量
    var initSecondPage = function(scope) {
        $rootScope.page = "second-page";
        scope.$state = $state; // 把$state挂载到当前控制器的scope
        scope.activeTab = 'second';
        scope.search = '';
        scope.isActiveClass = '';
        scope.active = ''; // 字符串类型，匹配SecondController需求
        scope.tabTitle = '';
        scope.dimension = [];
        scope.detailsArray = [];
        scope.details = [];
        scope.cards = [];
    };

    // 初始化第三页变量
    var initThirdPage = function(scope) {
        $rootScope.page = "third-page";
        $rootScope.previous_page = "second-page";
        $rootScope.getSearchCard = [];
        scope.resultsArray = [];
        scope.active = 0; // 整数类型，匹配ThirdController需求
        scope.isCollapsed = false;
        scope.isShow = false;
        scope.showSelectAll = true;
        scope.searchCards = false;
        scope.selectedCards = [];
        scope.totalRelated = [];
    };

    // 识别当前页面的方法
    var getCurrentPage = function() {
        // 方式1：通过$rootScope.page（最直接，初始化时会设置）
        return $rootScope.page;
        
        // 方式2：若用ui-router，通过$state判断（更可靠，避免变量被意外修改）
        // switch($state.current.name) {
        //     case 'first': return "first-page";
        //     case 'second': return "second-page";
        //     case 'third': return "third-page";
        //     default: return "";
        // }
    };

    return {
        initFirstPage: initFirstPage,
        initSecondPage: initSecondPage,
        initThirdPage: initThirdPage,
        getCurrentPage: getCurrentPage
    };
}]);

二、各控制器调用公共Service #

现在每个控制器只需要注入commonService，调用对应的初始化方法就能自动获取所需变量：

1. FirstController.js #

abbvieapp.controller('FirstController', ['$scope', 'commonService', function($scope, commonService) {
    // 初始化第一页所有变量
    commonService.initFirstPage($scope);

    // 其他控制器业务逻辑...
}]);

2. SecondController.js #

abbvieapp.controller('SecondController', ['$scope', 'commonService', function($scope, commonService) {
    commonService.initSecondPage($scope);

    // 其他控制器业务逻辑...
}]);

3. ThirdController.js #

abbvieapp.controller('ThirdController', ['$scope', 'commonService', function($scope, commonService) {
    commonService.initThirdPage($scope);

    // 其他控制器业务逻辑...
}]);

三、解决你提到的两个核心问题 #

问题1：不同控制器中$scope.active类型不同 #

在Service的页面初始化方法里，我们已经针对性设置了变量类型：

• initSecondPage中把scope.active设为空字符串，匹配SecondController的需求
• initThirdPage中把scope.active设为整数0，匹配ThirdController的需求
  调用对应初始化方法后，变量类型会自动对应，无需额外处理。

问题2：识别当前页面 #

Service里提供的getCurrentPage()方法有两种实现思路：

• 直接读取$rootScope.page：简单直接，因为每个页面初始化时都会主动设置这个变量
• 通过$state.current.name判断：如果项目用了ui-router，这种方式更可靠，不会因$rootScope.page被意外修改而出错

你可以在任何需要判断页面的地方调用这个方法，比如：

// 在控制器或其他Service中
var currentPage = commonService.getCurrentPage();
if(currentPage === "second-page") {
    // 执行第二页专属逻辑
}

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