表中的ng-repeat datepickers说'缺少实例数据'错误

时间：2016-03-09 08:14:49

标签： javascript jquery angularjs jquery-ui datepicker

我将datepicker指定为angularJS指令，即赋予uncaught exception: Missing instance data for this datepicker。但是，当我使用侧工作正常。在这里我的代码。 JSFiddle中相同。 我只使用非常简单的datepicker选项。排序后，datepicker不起作用。出于这个原因，我正在寻找一些解决方法。这个问题是this问题的替代方法。

var dimeapp = angular.module('dime', [])
  .controller('storeSrcWHController', function($scope, $http) {
    $scope.sortType = 'providerName'; // set the default sort type
    $scope.sortReverse = false; // set the default sort order

    $scope.dateChange = function(index, row) {
      console.log(row.startDateH);
    }

    $scope.tableData = [{
      "startDateH": "2011-06-11",
      "startDate": "11/06/2011"
    }, {
      "startDateH": "2011-03-12",
      "startDate": "12/03/2011"
    }, {
      "startDateH": "2011-07-13",
      "startDate": "13/07/2011",
    }];
  })
  .directive("datepicker", function () {
    return {
        restrict: "A",
        link: function (scope, el, attr) {
            el.datepicker({
              dateFormat: 'dd/mm/yy'
            });
        }
    };
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
<body ng-app="dime" ng-controller="storeSrcWHController">

<div class="col-sm-3 text-right">Global Date:</div>
							<div class="col-sm-7"><input type="text" id='globalDate' datepicker class='width-100-per' ng-model="globalDate" data-toggle="tooltip" data-placement="bottom" placeholder="Search by a Store ID"></div>
              
   <table ng-table="defaultWHTable" id="border-table" class="table table-hover">
    <thead>
      <tr>
        <th class="text-center" style="position: relative; width: 216px;">
          <div>
            Start Date Hidded<span class="mandatory">*</span>
          </div>
        </th>
        <th class="text-center" style="position: relative; width: 216px;">
          <div ng-click="sortType = 'startDateH'; sortReverse = !sortReverse">
            Start Date<span class="mandatory">*</span>
            <span class="glyphicon sort-icon" ng-show="sortType=='startDateH'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
          </div>
        </th>
    </thead>
    <tbody ng-cloak>
      <tr ng-repeat="row in tableData | orderBy:sortType:sortReverse " on-finish-render="invokDatePicker">
        <td align="center" style="width: 229px;">{{row.startDateH | date:'d-MM-yyyy' }}</td>
        <td align="center" style="width: 229px;">
          <input type="text" class="datepicker" datepicker ng-change="dateChange($index, row)" id="sartDate-{{$index}}" ng-model="row.startDate" readonly="readonly" style="cursor: default">
        </td>
      </tr>
    </tbody>
  </table>
</body>

2 个答案:

答案 0 :(得分：1)

我删除了id属性，然后这正如我预期的那样正常工作。

<input type="text" class="datepicker" datepicker ng-change="dateChange($index, row)" ng-model="row.startDate" readonly="readonly" style="cursor: default">

工作一：

＆＃13;
＆＃13; 
var dimeapp = angular.module('dime', [])
  .controller('storeSrcWHController', function($scope, $http) {
    $scope.sortType = 'providerName'; // set the default sort type
    $scope.sortReverse = false; // set the default sort order

    $scope.dateChange = function(index, row) {
      console.log(row.startDateH);
    }

    $scope.tableData = [{
      "startDateH": "2011-06-11",
      "startDate": "11/06/2011"
    }, {
      "startDateH": "2011-03-12",
      "startDate": "12/03/2011"
    }, {
      "startDateH": "2011-07-13",
      "startDate": "13/07/2011",
    }];
  })
  .directive("datepicker", function () {
    return {
        restrict: "A",
        link: function (scope, el, attr) {
            el.datepicker({
              dateFormat: 'dd/mm/yy'
            });
        }
    };
});
＆＃13; 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
<body ng-app="dime" ng-controller="storeSrcWHController">

<div class="col-sm-3 text-right">Global Date:</div>
							<div class="col-sm-7"><input type="text" id='globalDate' datepicker class='width-100-per' ng-model="globalDate" data-toggle="tooltip" data-placement="bottom" placeholder="Search by a Store ID"></div>
              
   <table ng-table="defaultWHTable" id="border-table" class="table table-hover">
    <thead>
      <tr>
        <th class="text-center" style="position: relative; width: 216px;">
          <div>
            Start Date Hidded<span class="mandatory">*</span>
          </div>
        </th>
        <th class="text-center" style="position: relative; width: 216px;">
          <div ng-click="sortType = 'startDateH'; sortReverse = !sortReverse">
            Start Date<span class="mandatory">*</span>
            <span class="glyphicon sort-icon" ng-show="sortType=='startDateH'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
          </div>
        </th>
    </thead>
    <tbody ng-cloak>
      <tr ng-repeat="row in tableData | orderBy:sortType:sortReverse " on-finish-render="invokDatePicker">
        <td align="center" style="width: 229px;">{{row.startDateH | date:'d-MM-yyyy' }}</td>
        <td align="center" style="width: 229px;">
          <input type="text" class="datepicker" datepicker ng-change="dateChange($index, row)" ng-model="row.startDate" readonly="readonly" style="cursor: default">
        </td>
      </tr>
    </tbody>
  </table>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你只需要像这样使用它：

        $timeout(function(){
           el.datepicker({
           dateFormat: 'dd/mm/yy'
        }
);

修改后的Fiddle

相关问题
最新问题