AngularJS：如何在控制器间传递单选按钮值并控制页面字段显示

这个跨控制器传值的场景在AngularJS开发里挺常见的，我给你几个实用的解决方案，你可以根据项目情况选择：

方案1：用自定义Service（最推荐，符合Angular设计思想） #

Service是Angular里的单例对象，专门用来在不同控制器间安全共享数据，不会污染全局作用域，维护起来也方便。

步骤1：创建共享数据的Service #

angular.module('yourAppName')
  .service('ButtonSelectionService', function() {
    // 存储选中的按钮类型，默认设为null
    var selectedButton = null;

    return {
      getSelectedButton: function() {
        return selectedButton;
      },
      setSelectedButton: function(value) {
        selectedButton = value;
      }
    };
  });

步骤2：在Ctrl1中注入Service，点击按钮时保存值并跳转 #

假设你的单选按钮结构是这样的：

<div ng-controller="Ctrl1">
  <input type="radio" ng-model="selectedBtn" value="1" ng-click="goToApplication()">按钮1
  <input type="radio" ng-model="selectedBtn" value="2" ng-click="goToApplication()">按钮2
</div>

Ctrl1的逻辑代码：

angular.module('yourAppName')
  .controller('Ctrl1', function($scope, $location, ButtonSelectionService) {
    $scope.goToApplication = function() {
      // 把选中的按钮值存入Service
      ButtonSelectionService.setSelectedButton($scope.selectedBtn);
      // 跳转到application.jsp（假设路由配置的路径是'/application'）
      $location.path('/application');
    };
  });

步骤3：在application.jsp对应的Ctrl2中获取值，控制字段显示 #

页面部分：

<div ng-controller="Ctrl2">
  <label>NAME: <input type="text" ng-model="user.name"></label><br>
  <label>EMAIL: <input type="email" ng-model="user.email"></label><br>
  <label ng-show="showDOB">DOB: <input type="date" ng-model="user.dob"></label>
</div>

Ctrl2的逻辑代码：

angular.module('yourAppName')
  .controller('Ctrl2', function($scope, ButtonSelectionService) {
    // 获取从Ctrl1传过来的按钮值
    var btnValue = ButtonSelectionService.getSelectedButton();
    // 控制DOB字段显示：只有点击按钮2时才显示
    $scope.showDOB = (btnValue === '2');
  });

方案2：用路由传参（适合URL可见参数/刷新保留状态的场景） #

如果需要参数在URL里可见，或者用户刷新页面后依然能保持字段显示状态，这种方法更合适。

步骤1：配置ngRoute路由 #

angular.module('yourAppName')
  .config(function($routeProvider) {
    $routeProvider
      .when('/application', {
        templateUrl: 'application.jsp',
        controller: 'Ctrl2'
      });
  });

步骤2：Ctrl1跳转时携带参数 #

angular.module('yourAppName')
  .controller('Ctrl1', function($scope, $location) {
    $scope.goToApplication = function() {
      // 把选中的按钮值作为查询参数加到URL上
      $location.path('/application').search('btnType', $scope.selectedBtn);
    };
  });

步骤3：Ctrl2中获取路由参数控制显示 #

angular.module('yourAppName')
  .controller('Ctrl2', function($scope, $routeParams) {
    // 获取URL中的btnType参数
    var btnValue = $routeParams.btnType;
    $scope.showDOB = (btnValue === '2');
  });

方案3：用$rootScope（不推荐，慎用） #

虽然能快速实现，但$rootScope是全局作用域，变量很容易被其他代码意外覆盖，后期维护成本高，只适合极简单的临时场景。

步骤1：Ctrl1中把值存入$rootScope #

angular.module('yourAppName')
  .controller('Ctrl1', function($scope, $location, $rootScope) {
    $scope.goToApplication = function() {
      $rootScope.selectedButton = $scope.selectedBtn;
      $location.path('/application');
    };
  });

步骤2：Ctrl2中读取$rootScope的值 #

angular.module('yourAppName')
  .controller('Ctrl2', function($scope, $rootScope) {
    $scope.showDOB = ($rootScope.selectedButton === '2');
  });

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