角度自定义指令不能将值更改为ng-model

Question

我是角色新手，我为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)
  }
});

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

感谢任何帮助，

MY PLUNKER LINK 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);
                  });
            }
          });
        }
      };
    })