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

Question

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

如果我使用 ng-change="myAngularExpression()"单击文本框后，它会立即调用该函数。 输入实际发生变化后，如何调用函数？

在我的具体情况下，用户单击显示 MM/DD/YYYY 的文本框，下拉日历出现，然后 Angular 表达式执行，然后用户更改值，直到他们单击元素并返回它。

Answer 1

我假设您使用的是基于 jQuery 的 Bootstrap 日期选择器。不幸的是，将基于 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 一起“足够好”地工作，但这是一条湿滑的道路。