javascript - Angular (jquery timepicker)无法获取输入值

Question

我想使用 jquery 插件时间选择器创建自定义指令。我没有在控制台中获取输入值，它显示未定义。

here's a plunkr

<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"   ng-model="dup_row1 " size=6 timepicki/>
        {{dup_row1}}
      </td>
    </tr>

  </tbody>
</table>

<小时/>

var app = angular.module('myApp', []);
app.directive('timepicki', [

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

    return {
      restrict: 'A',
      link: link,
      require: 'ngModel'
    };
  }
])
app.controller('ctrl', function($scope) {
  $scope.row1 = "00:00"

  $scope.submit=function(){
    console.log($scope.dup_row1)
  }
});

Answer 1

您发布的代码与您的 plunker 中的代码不同。

AngularJS 开发者指南说；

Use controllers to:

• Set up the initial state of the $scope object.

在上面的示例中，您在提交时记录了 $scope.dup_row1 的值，但您的 Controller 从未设置该值，因此它是未定义的。

以下内容将在控制台打印“hello”；

app.controller('ctrl', function($scope) {
  $scope.row1 = "00:00"
  $scope.dup_row1 = "hello"

  $scope.submit=function(){
    console.log($scope.dup_row1)
  }
});