javascript - Angular 自定义指令无法更改 ng-model 的值

Question

我是 Angular 新手，我已经为 jquery timepicker 插件创建了一个自定义指令，并且该插件未与 ng-model 绑定(bind)

我的代码是

控制台输出，显示未定义

请查看

<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="table.row1" size=6/ disabled>
      </td>
      <td>
        <input type="text"   ng-model="table.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.table={}
  $scope.table.row1 = "00:00"

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

这是制作自定义指令的正确方法吗？

感谢任何帮助，

我的骗子链接http://plnkr.co/edit/ZHYvUABqHh1MVF9APrR7?p=preview

提前致谢

Answer 1

使用插件 Timepicki 的 on_change 属性。 OnSelect 插件中不存在。

app.directive('timepicki', function() {
      return {
        require: 'ngModel',
        link: function(scope, el, attr,ngModel) {
          $(el).timepicki({
              on_change: function(dateText) {
                  dateFormat: 'hh:mm a',
                scope.$apply(function() {
                    ngModel.$setViewValue(dateText);
                  });
            }
          });
        }
      };
    })