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

Posted 2023-05-09

【中文标题】调用 $(".myItem").dateInput() 后 angularjs 输入字段未更新

【英文标题】：angularjs input field not updating after calling $(".myItem").dateInput()

【发布时间】：2017-10-09 00:50:32

【问题描述】：

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

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

【问题讨论】：

停止同时使用jquery和angular？

在这种情况下，我的输入字段无法正常工作。

那是什么？你还没有定义它应该如何工作，也没有定义它目前如何不工作。

日期时间编辑器，格式为：“dd-mm-jjjj uu:mm”，通过向上和向下键更改日、月、年、小时和分钟。不要允许像 2 月 31 日这样的日期。

【参考方案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>

【讨论】：

注意：这应该是正确的方法，但如果它不能正常工作，您可以尝试执行$apply() 或在事件中分配值，例如change例如

它仍然没有更新。我添加了 ng-change="$scope.$apply();"到我的输入字段。我还添加了这个： $(".myItem").dateInput(); $scope.$apply();范围.$apply();

@user1408786 你必须在你的控制器中调用$scope.$apply()。更改为ng-change="change()" 并在change 函数中调用$scope.$apply()。

其实我的意思正好相反，类似$(".myItem").on('change', $scope.$apply);，或者直接模拟绑定行为：$(".myItem").on('change', function() $scope.$myVar = $(this).value; );（写的很快，如有错误见谅）。只是那个 jQuery 事件在 Angular 不再存在时仍然应该触发。

@user1408786 你能做一个简单的 plunker 或 jsfidle 来重现你的问题吗？因为我不太了解dateInput()