Angular (jquery时间选择器)无法检测到变化

angular (jquery timepicker) is unable to detect changes

本文关键字：检测 变化 jquery 时间 选择器 Angular      更新时间：2023-09-26

我不熟悉角，在做一个小练习时，我被击中了我想启用ng-show取决于前一行的时间和时间输入是通过jquery时间选择器，但我的角是无法读取时间选择器的值来显示下一行

我的代码如下

<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();

任何帮助都会很感激。提前感谢

my plunker link

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

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

指令 

app.directive('timepicki', [
  function() {
    var link;
    link = function(scope, element, attr, ngModel) {
      element.timepicki();
    };
    return {
      restrict: 'A',
      link: link,
      require: 'ngModel'
    };
  }
])
工作Plunkr

相关文章：