调用 $(".myItem").dateInput() 后 angularjs 输入字段未更新

Question

在我拥有日期时间编辑器之前，我的角度输入字段工作正常。

<input class="myItem" defaultdate="2017-05-10T06:50" displayformat="dd-mm-jjjj uu:mm" pageupdownweek="true" updownnavigateminutes="15" isodate="2017-02-28T06:50" ng-if="rule.dataType == 'datetime-local'" ng-model="rule.data" /> {{rule.data}}

此代码运行良好。它显示一个带有日期的输入字段，其旁边是输入字段中的值。

但是因为我想把它用作日期时间编辑器，所以我执行 $(".myItem").dateInput();在此之后我的输入字段工作正常，它的工作方式就像它被设计为日期时间编辑器一样。但是 {{rule.data}} 将不再更新。有什么想法可以解决这个问题吗？

https://jsfiddle.net/qn37dg7c/

解决方案： http://jsfiddle.net/w6afdw1L/

Answer 1

当使用jquery时，它会超出angular的作用域，你必须运行$scope.$apply()让angular重新渲染页面。

$(".myItem").dateInput(...);
$scope.$apply();

angular.module("app", [])
  .controller("myCtrl", function($scope, $timeout) {
    $scope.change = function() {
      console.log('change event fired');
      $timeout(function() {
        $(".myItem").dateInput();
        $scope.$apply();
      })
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <input class="myItem" defaultdate="2017-05-10T06:50" displayformat="dd-mm-jjjj uu:mm" pageupdownweek="true" updownnavigateminutes="15" isodate="2017-02-28T06:50" ng-model="rule.data" ng-change="change()" /> {{rule.data}}
</div>