Question

我正在使用一个操作和修改<input type="text">元素的引导日历日期选择器。

如果我使用ng-change="myAngularExpression()"，则会在单击文本框后立即调用该函数。在输入实际更改后，如何才能调用函数？

在我的特定情况下，用户点击显示MM / DD / YYYY的文本框并下拉日历，然后执行角度表达式，然后用户更改值并且没有任何反应直到他们点击元素并回到它上面。

Answer 1

我假设你正在使用基于jQuery的Bootstrap datepicker。不幸的是，将基于jQuery的Bootstrap小部件与Angular混合很少很好。

更好的选择是使用UI Bootstrap，它是完全用Angular编写的Bootstrap小部件的集合。例如，这是datepicker。

一旦您使用Angular作为小部件（使用UI Bootstrap），观察日期更改就像$scope.$watch()一样简单：

$scope.$watch('date', function() { /* ... */ });

完整示例：

var app = angular.module('app', ['ui.bootstrap']);

app.controller('Main', function($scope) {
  $scope.date = new Date();
  
  // watch date for changes
  $scope.$watch('date', function(newValue, oldValue) {
    if (newValue !== oldValue)
    {
      $scope.message = 'Date changed from ' + oldValue + ' to ' + newValue;
    }
  });
});

<div ng-app="app">
  <div ng-controller="Main">  
    <datepicker ng-model="date"></datepicker>
    <div ng-bind="message"></div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>

有人可能能够提供一个答案，允许基于jQuery的日期选择器与Angular“足够好”，但这是一条很滑的道路。

Answer 2

ng-keydown怎么样？这样输入只有在你按下键时才会改变。

<input ng-keydown='someAwesomeMethodHere()'/>

AngularJS指令在文本输入更改后运行

2 个答案: