使用ng-model时无法设置输入值？AngularJS组件表单默认值问题

别慌！用AngularJS组件给表单设置默认值其实没你想的那么麻烦，只是和传统控制器的写法思路略有不同而已～ 我帮你梳理下具体的实现方式，结合你给出的代码片段来调整：

AngularJS组件本质是基于Controller As模式的，所以我们不需要依赖$scope，直接在控制器的this（通常会赋值给self避免上下文混淆）上初始化或赋值字段即可，模板里通过$ctrl来绑定这些属性。

1. 直接初始化本地默认值 #

如果默认值是固定的，直接在控制器里给self.patient赋值就行：

angular.module('patientInfo').component('patientInfo', {
    templateUrl: 'patient-info/patient-info.template.html',
    controller: ['$http', '$routeParams', function PatientInfoController($http, $routeParams) {
        var self = this;

        // 初始化表单默认值
        self.patient = {
            name: '',
            age: null,
            gender: '未知', // 给性别设置默认选项
            department: '内科' // 默认科室
        };

        // 后续如果需要从接口拉取数据覆盖/补充默认值，继续写逻辑即可
        $http.get('/api/patients/' + $routeParams.patientId)
            .then(function(response) {
                // 用接口数据合并默认值（接口返回的字段会覆盖默认，没返回的保留默认）
                self.patient = angular.extend({}, self.patient, response.data);
            });
    }]
});

2. 结合组件绑定处理外部传入的默认值 #

如果你的组件需要接收外部传入的参数，还可以通过bindings定义可选属性，并在$onInit钩子（组件初始化完成的生命周期钩子）里设置默认值：

angular.module('patientInfo').component('patientInfo', {
    templateUrl: 'patient-info/patient-info.template.html',
    // 定义组件绑定，?表示该属性可选
    bindings: {
        defaultPatient: '<?', // 外部传入的默认患者信息
        defaultDepartment: '@?' // 外部传入的默认科室（字符串类型）
    },
    controller: ['$http', '$routeParams', function PatientInfoController($http, $routeParams) {
        var self = this;

        self.$onInit = function() {
            // 如果外部没传defaultPatient，初始化本地默认值
            self.patient = self.defaultPatient || {
                name: '',
                age: null,
                gender: '未知'
            };
            // 如果外部没传defaultDepartment，设置默认
            self.patient.department = self.defaultDepartment || '内科';
        };

        // 接口拉取逻辑...
    }]
});

3. 模板中绑定字段的写法 #

模板里要通过$ctrl来绑定控制器里的属性，比如：

<form class="patient-form">
    <div class="form-group">
        <label>患者姓名</label>
        <input type="text" ng-model="$ctrl.patient.name" class="form-control">
    </div>
    <div class="form-group">
        <label>年龄</label>
        <input type="number" ng-model="$ctrl.patient.age" class="form-control">
    </div>
    <div class="form-group">
        <label>性别</label>
        <select ng-model="$ctrl.patient.gender" class="form-control">
            <option value="男">男</option>
            <option value="女">女</option>
            <option value="未知">未知</option>
        </select>
    </div>
</form>

另外提个小细节：你原代码里控制器注入了$scope但没在依赖数组里声明，这会导致AngularJS的依赖注入报错，组件开发里其实也不需要$scope，直接用self就够啦～

组件化确实是AngularJS后期推荐的写法，虽然初期找示例麻烦，但复用性和维护性比传统控制器好很多，慢慢习惯就顺手啦！

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