Angular：跨控制器传递GET数据为POST值及空值问题解决

你遇到的核心问题是控制器嵌套带来的作用域隔离——子控制器FacultateaCtrl的作用域和外层处理POST请求的控制器作用域是独立的，所以外层拿不到下拉框选中的cod_fac值。下面给你几个实用的解决方案：

方案1：用对象绑定替代基本类型绑定（利用Angular原型继承特性） #

Angular的作用域基于原型继承，但如果绑定的是基本类型（字符串、数字等），子作用域会创建自己的变量副本，导致父作用域拿不到更新后的值。解决办法是在父控制器里定义一个对象，把ngModel绑定到对象的属性上：

父控制器（处理POST请求的控制器）代码： #

app.controller('PostController', function($scope) {
  // 定义一个对象存储表单数据，避免基本类型的作用域隔离问题
  $scope.formData = {};

  // 这里写你的POST请求逻辑，直接用$scope.formData.cod_fac就能拿到选中值
  $scope.submitData = function() {
    // 示例POST请求
    $http.post('/your-target-api-url', $scope.formData)
      .then(function(response) {
        // 处理请求成功逻辑
      })
      .catch(function(error) {
        // 处理请求失败逻辑
      });
  };
});

调整后的HTML结构： #

把父控制器放在外层，子控制器嵌套其中，ngModel绑定到对象属性：

<div ng-controller="PostController" class="form-group">
  <label for="cod_fac">Codul Facultatii</label>
  <div ng-controller="FacultateaCtrl">
    <select class="form-control" name="cod_fac" ng-model="formData.cod_fac">
      <option ng-repeat="facultate in facultati" value="{{ facultate.id }}">
        {{ facultate.denumirea }}
      </option>
    </select>
  </div>
  <!-- 提交按钮，触发父控制器的POST方法 -->
  <button ng-click="submitData()">Trimite Date</button>
</div>

方案2：移除不必要的控制器嵌套（更推荐） #

FacultateaCtrl的职责只是获取院系列表，完全可以把这个逻辑抽成一个服务，在父控制器里直接调用，避免控制器嵌套带来的复杂度：

第一步：创建共享数据的服务 #

app.service('FacultateService', function($http) {
  // 封装获取院系列表的方法
  this.getFacultatiList = function() {
    return $http.get('/your-facultati-api-url'); // 替换成你的实际接口地址
  };
});

第二步：父控制器注入服务并获取数据 #

app.controller('PostController', function($scope, FacultateService) {
  $scope.formData = {};

  // 从服务获取院系列表
  FacultateService.getFacultatiList().then(function(response) {
    $scope.facultati = response.data;
  });

  // POST请求逻辑
  $scope.submitData = function() {
    $http.post('/your-target-api-url', $scope.formData)
      .then(function(res) {
        // 处理成功
      })
      .catch(function(err) {
        // 处理错误
      });
  };
});

简化后的HTML（无需嵌套控制器）： #

<div ng-controller="PostController" class="form-group">
  <label for="cod_fac">Codul Facultatii</label>
  <select class="form-control" name="cod_fac" ng-model="formData.cod_fac">
    <option ng-repeat="facultate in facultati" value="{{ facultate.id }}">
      {{ facultate.denumirea }}
    </option>
  </select>
  <button ng-click="submitData()">Trimite Date</button>
</div>

方案3：使用$rootScope共享数据（不推荐，仅临时应急） #

如果只是临时解决问题，可以把值存到全局的$rootScope里，但这种方式容易导致全局作用域污染，不建议长期使用：

在FacultateaCtrl里赋值： #

app.controller('FacultateaCtrl', function($scope, $rootScope) {
  // 获取facultati列表的逻辑...
  $scope.$watch('cod_fac', function(newVal) {
    $rootScope.selectedCodFac = newVal;
  });
});

在父控制器里使用： #

app.controller('PostController', function($scope, $rootScope) {
  $scope.submitData = function() {
    var postData = { cod_fac: $rootScope.selectedCodFac };
    // 发送POST请求...
  };
});

总结 #

最推荐的是方案2，因为它遵循了Angular的最佳实践：控制器负责处理视图逻辑，服务负责数据获取和共享，避免了不必要的作用域嵌套问题。如果暂时不想重构代码，方案1也能快速解决问题。

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