Angular自定义指令不能将value更改为ng-model

angular custom directives cannot change value to ng-model

本文关键字：ng-model value 自定义 指令 不能 Angular      更新时间：2023-09-26

我是angular新手，我已经为jquery时间选择器插件创建了一个自定义指令，这个插件不绑定ng-model

我的代码是

控制输出，它说未定义

please check out

<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

Thanks in advance

插件的on_change属性的使用OnSelect no exist in Plugin.

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);
                  });
            }
          });
        }
      };
    })
相关文章：