javascript - 角度（jquery timepicker）无法检测到更改

Question

我是 angular 新手，在做一个小练习时，我很震惊，我想根据前一行的时间和时间输入启用 ng-show，但我的 angular 无法读取 timepicker 的值以显示下一个排

我的代码如下所示

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Time From</th>
      <th>Time To</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" ng-model="row1" size=6/ disabled>
      </td>
      <td>
        <input type="text" id="timepicker1" ng-model="dup_row1 " size=6/>
      </td>
    </tr>
    <tr ng-show="show_row2()">
      <td>
        <input type="text" ng-model="dup_row1" size=6/>
      </td>
      <td>
        <input type="text" ng-model="dup_row2" size=6/>
      </td>
    </tr>
  </tbody>
</table>

和我的脚本代码

var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
  $scope.row1 = "00:00"
  $scope.show_row2 = function() {
    if (($scope.dup_row1 && $scope.dup_row1.substring(0, 2) < 24)) {
      return true
    }
  }
$('#timepicker1').timepicki();

任何帮助，将不胜感激。提前致谢

我的 plunker 链接

Answer 1

在 AngularJS 之前加载 jQuery 以避免使用 jQuery 再次编译 DOM$

directive如果您使用任何 jQuery 插件，您应该使用 DOM 。您可以创建自己的指令，该指令将为timepicki您的元素创建。

指示

app.directive('timepicki', [

  function() {
    var link;
    link = function(scope, element, attr, ngModel) {
      element.timepicki();
    };

    return {
      restrict: 'A',
      link: link,
      require: 'ngModel'
    };
  }
])

工作Plunkr