Angular问题：子组件无法获取父组件传递的primarySite值

核心问题分析 #

primarySite无法传递到子组件的问题，主要源于两个关键错误：

1. 父组件下拉框选中判断逻辑不匹配 #

在parent-form.html的Primary Site下拉框中，ng-selected绑定的是vm.data.site==d，但该下拉框的ng-model是vm.data.primarySite，两者变量不一致，导致选中值无法同步到vm.data.primarySite，自然无法传递给子组件。

2. 父组件变量未初始化 #

如果父组件的vm.data.primarySite在初始化阶段未被定义，Angular的单向绑定无法追踪未初始化变量的变化，会导致子组件始终接收到undefined。

具体修复步骤 #

步骤1：修正下拉框选中判断逻辑 #

将Primary Site下拉框的ng-selected绑定值改为匹配ng-model的变量：

<!-- 原代码 -->
<option ng-if="vm.data.parentSite == 'A'" ng-repeat="d in vm.siteOptions.SiteA | orderBy:'toString()'" value="{{d}}" ng-selected="vm.data.site==d">{{d}}</option>
<option ng-if="vm.data.parentSite == 'B'" ng-repeat="d in vm.siteOptions.SiteB | orderBy:'toString()'" value="{{d}}" ng-selected="vm.data.site==d">{{d}}</option>

<!-- 修正后代码 -->
<option ng-if="vm.data.parentSite == 'A'" ng-repeat="d in vm.siteOptions.SiteA | orderBy:'toString()'" value="{{d}}" ng-selected="vm.data.primarySite == d">{{d}}</option>
<option ng-if="vm.data.parentSite == 'B'" ng-repeat="d in vm.siteOptions.SiteB | orderBy:'toString()'" value="{{d}}" ng-selected="vm.data.primarySite == d">{{d}}</option>

步骤2：初始化父组件变量 #

在父组件控制器中，明确初始化vm.data.primarySite，避免未定义状态：

// 父组件控制器示例
function ParentFormController() {
  var vm = this;
  // 初始化数据对象及内部变量
  vm.data = {
    parentSite: '', // 根据业务场景设置初始值
    primarySite: '', // 显式初始化primarySite
    backupSite: ''
  };
  // ...其他业务逻辑
}

步骤3：验证子组件绑定配置 #

你的子组件bindings配置是正确的，单向绑定<可以正常接收父组件变量变化，无需修改：

bindings : {
    parentSite : '<',
    primarySite : '<',
    backupSite : '<'
}

额外优化建议 #

推荐使用ng-options替代ng-repeat生成下拉框选项，代码更简洁且能避免潜在的绑定问题：

<!-- Primary Site下拉框优化版 -->
<select class="form-control" ng-model="vm.data.primarySite" required
        ng-options="d for d in (vm.data.parentSite == 'A' ? vm.siteOptions.SiteA : vm.siteOptions.SiteB) | orderBy:'toString()'">
</select>

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