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

Question

我的 Angular 输入字段工作正常，直到我有了日期时间编辑器。

<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>