AngularJS问题：ng-change仅在页面加载时触发一次

我之前在Angular 1.x项目里也碰到过类似的time输入框ng-change失效的情况，给你几个实用的排查和解决方向：

1. 排查ng-model绑定的变量类型问题 #

time输入控件对绑定的变量类型比较敏感：如果accvm.data.time是Date对象，部分浏览器的time控件在修改后可能无法正确更新这个Date对象，导致Angular检测不到值的变化，ng-change也就不会触发。

解决办法：

• 把绑定的变量改成字符串类型，初始化时用$filter('date')将初始日期转成HH:mm格式的字符串；
• 或者在控制器里手动处理输入框的时间值，将字符串转成Date对象后再存到accvm.data.time中。

2. 强制ng-model的更新时机 #

默认情况下，Angular的ng-model可能不会在输入框内容每一次变化时都立即更新。你可以给input加上ng-model-options，强制在内容变化或失去焦点时更新ng-model，确保ng-change能被触发：

<input name="time" type="time" 
       max="{{ accvm.data.maxTime | date:'HH:mm' }}" 
       ng-model="accvm.data.time" 
       ng-change="accvm.timeChange()" 
       ng-model-options="{ updateOn: 'change blur' }" 
       style="text-align: right" 
       required />

3. 检查max属性的绑定是否异常 #

你的输入框绑定了max="{{ accvm.data.maxTime | date:'HH:mm' }}"，如果accvm.data.maxTime的格式不正确，或者动态变化时出现异常，可能会导致输入框的有效值判断出错，间接影响ng-model的更新。

可以先临时去掉max属性测试，如果ng-change恢复正常，再重点排查maxTime的格式和绑定逻辑。

4. 用$watch替代ng-change（兜底方案） #

如果上面的方法都没解决问题，可以在控制器里用$watch监听accvm.data.time的变化，这比ng-change的触发逻辑更稳定：

accvm.$watch('data.time', function(newVal, oldVal) {
  // 避免初始加载时触发（如果不需要的话）
  if (newVal !== oldVal) {
    accvm.timeChange();
  }
});

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