AngularJS无法获取input的ng-model值到控制器问题求助

这问题我做Ionic项目时也踩过坑！核心问题大概率出在你自定义的<my-calendar>指令的绑定逻辑上——虽然它能把选中的日期显示到输入框，但并没有真正把值同步回父作用域的$scope.dateValue里，导致控制器拿不到更新后的值。

可能的原因&解决方案 #

1. 作用域原型链遮蔽问题（最常见） #

AngularJS的作用域基于原型链继承，如果你直接用$scope.dateValue这种原始类型变量（字符串、数字、布尔值），当指令创建子作用域时，可能会出现「子作用域修改的是自己的副本，而非父作用域的变量」的情况，这就是所谓的作用域遮蔽。

解决方法：用对象包裹变量
把原始类型变量放到一个对象里，绑定的是对象的引用，就能避免遮蔽问题：

修改控制器代码：

// Controller.js
$scope.formData = { dateValue: "" }; // 用对象包裹日期变量
$scope.saveFieldWork = function(fieldWork) {
  fieldWork.fieldDate = $scope.formData.dateValue; // 从对象中取值
  // 其他代码
};

修改HTML代码：

<div class="list">
  <label class="item item-input">
    <input type="text" data-ng-model="formData.dateValue" disabled>
  </label>
</div>
<my-calendar display="formData.dateValue" dateformat="'yyyy-MM-dd'"></my-calendar>
<button id="fieldWork-button21" data-ng-click="saveFieldWork(fieldWork)"></button>

2. 自定义指令的双向绑定未配置正确 #

你的<my-calendar>指令用了display="dateValue"，如果指令使用了隔离作用域，必须确保display属性是双向绑定的，否则只能从父作用域读取值，无法把选中的日期写回去。

检查并修改指令代码：

// 你的my-calendar指令定义
angular.module('yourApp').directive('myCalendar', function() {
  return {
    scope: {
      display: '=', // 必须用`=`实现双向绑定，不能用`@`（单向文本绑定）或`&`（方法绑定）
      dateformat: '@' // dateformat用@没问题，因为是单向读取格式字符串
    },
    link: function(scope, element, attrs) {
      // 假设你的日历选择逻辑中，选中日期后执行以下代码：
      function onDateSelected(selectedDate) {
        // 如果是异步操作（比如第三方日历插件的回调），需要用$apply触发Angular的脏检查
        scope.$apply(function() {
          scope.display = selectedDate; // 关键：更新绑定的变量，同步回父作用域
        });
      }
    }
  };
});

3. 避免直接操作DOM修改输入框值 #

如果你的日历指令是通过原生JS直接修改输入框的value属性（而不是通过Angular的ng-model绑定），那Angular的双向绑定机制就会失效——这种绕开框架的DOM操作不会触发Angular的脏检查，控制器的$scope变量自然不会更新。

确保指令始终通过绑定的display变量来更新日期，而不是直接操作input元素。

总结 #

你遇到的问题本质是数据没有在指令和父控制器之间正确双向同步，要么是作用域遮蔽导致父作用域变量没被更新，要么是指令的绑定配置错误。按照上面的方法修改后，应该就能在saveFieldWork函数中拿到正确的日期值了。

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