Question

我很有棱角，在做一个小练习的时候，我很震惊我想根据之前的行时序启用ng-show，时间输入是通过jquery timepicker，但是我的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();

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

my plunker link

Answer 1

在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'
    };
  }
])

Working Plunkr

angular（jquery timepicker）无法检测到更改

1 个答案: