javascript - 角度自定义指令无法将值更改为 ng-model

Question

我是 Angular 的新手，我为 jquery timepicker 插件创建了一个自定义指令，这个插件没有与 ng-model 绑定

我的代码是

控制台输出，它说未定义

请查看

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

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

任何帮助表示赞赏，

我的 PLUNKER 链接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);
                  });
            }
          });
        }
      };
    })