angularui datepicker:TypeError:不能使用'in'运算符在undefined中搜索'show-weeks'

时间:2014-01-23 16:27:40

标签: angularjs angular-ui angular-ui-bootstrap

我想使用像this这样的angularui的简单弹出式日期选择器。 当我将标记和javascript代码复制到我的应用程序时,我得到了这个:

TypeError: Cannot use 'in' operator to search for 'show-weeks' in undefined
    at link (http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js:1247:43)
    at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:6220:13)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5630:15)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5633:13)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5633:13)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5633:13)
    at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:6214:24)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5630:15)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5633:13)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5633:13) <input type="text" class="form-control ng-pristine ng-valid" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"> angular.js:9413
(anonymous function) angular.js:9413
(anonymous function) angular.js:6832
nodeLinkFn angular.js:6223
compositeLinkFn angular.js:5630
compositeLinkFn angular.js:5633
compositeLinkFn angular.js:5633
compositeLinkFn angular.js:5633
nodeLinkFn angular.js:6214
compositeLinkFn angular.js:5630
compositeLinkFn angular.js:5633
compositeLinkFn angular.js:5633
publicLinkFn angular.js:5535
(anonymous function) angular.js:1303
Scope.$eval angular.js:11949
Scope.$apply angular.js:12049
(anonymous function) angular.js:1301
invoke angular.js:3704
doBootstrap angular.js:1299
bootstrap angular.js:1313
angularInit angular.js:1262
(anonymous function) angular.js:20549
trigger angular.js:2341
(anonymous function) angular.js:2612
forEach angular.js:309
eventHandler

我可以发布我的应用程序的代码,但它基本上就像:

angular.module('appName', ['ui.bootstrap'])
  .controller("MyCtrl", function MyCtrl($scope, $http) { 
    $scope.today = function() {
      $scope.dt = new Date();
    };

  // ... the rest of the code EXACTLY like in the plnkr

  });

  <html ng-app="appName">
    <div ng-controller="MyCtrl">
      <p class="input-group">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt"
               is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions"
               date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
        <span class="input-group-btn">
          <button class="btn btn-default" ng-click="open($event)">
            <i class="glyphicon glyphicon-calendar"></i>
          </button>
        </span>
      </p>
    </div>
  </html>

我也使用了plnkr中出现的SAME angularjs / angularui / bootstrap CDN。为什么在我的应用程序中发生这种情况,而在plnkr中它可以正常工作?!

编辑:

在没有得到任何答案之后,我决定在第1247行更改angularui的源代码,异常上升。我不是世界上最好的javascript程序员,所以我确保datepickerOptions在使用运算符in之前是一个对象:

if (!((typeof(datepickerOptions) === "object")) || !('show-weeks' in datepickerOptions)) {
  scope.showWeeks = datepickerConfig.showWeeks;
} else {
  scope.showWeeks = datepickerOptions['show-weeks'];
}

我仍然在寻找一个真正的解决方案。

1 个答案:

答案 0 :(得分:6)

删除datepicker-options="dateOptions"

说明

您可以在弹出设置

下的the Documentation中看到
  

datepicker的选项可以使用datepicker-options属性作为JSON传递。

您复制的示例在指令中使用datepicker-options="dateOptions"。该错误告诉您Angular正在尝试查找show-weeks中设置的dateOptions值。问题是,dateOptions未在html中定义。

查看示例中的JavaScript,您将看到缺少的变量在控制器的范围内定义。

$scope.dateOptions = {
  'year-format': "'yy'",
  'starting-day': 1
};