【angularJs】input输入框填充日期后ng-change未触发的解决办法

场景：项目使用了日期插件，在日期变动后，能计算时间差
问题：日期变动后，ng-change()未触发
原因：ng-change 事件只针对输入框值的真实修改，通过 JavaScript 来修改的无效。

解决方法：ng-change 指令指令不会覆盖原生的 onchange 事件，使用onchange()方法替代。

使用前代码：日期变动后，ng-change()未触发

  <div class="row">
    <input class="form-group" type="text" id="time" name="time" ng-model="vm.time"
           ng-change="vm.countDuration()"
           jx-laydate date-options="{format:'yyyy-MM-dd HH:mm',type:'datetime'}"/>
  </div>

---

解决方法：使用onchange替换ng-change，通过元素class/id强行调用onchange()方法

  <div class="row">
    <input class="form-group duration" type="text" id="time" name="time" ng-model="vm.time"
           onchange="vm.countDuration()"
           jx-laydate date-options="{format:'yyyy-MM-dd HH:mm',type:'datetime'}"/>
  </div>

scope.$watch('ngModel', function (newValue, oldValue) {
  if (scope.ngModel) {
    scope.ngModel = $filter('date')(new Date(scope.ngModel), dateOptions.format || 'yyyy-MM-dd');
    //监听ngModel有值后，通过元素class匹配，强行调用onchange()方法
    if(element[0].className.includes('duration')){
      element[0].onchange();
    }
  }
});

日期变动后，浏览器控制台报错vm is not defined，即调用的vm.countDuration()函数不存在

在页面上强制指定作用域中的函数

  <div class="row">
    <input class="form-group duration" type="text" id="time" name="time" ng-model="vm.time"
           onchange="angular.element(this).scope().vm.countDuration()"
           jx-laydate date-options="{format:'yyyy-MM-dd HH:mm',type:'datetime'}"/>
  </div>

在日期变动后，成功计算时间差