1

我是 angularjs 的新手，也是 ng-admin 的新手。我正在为我的项目使用 ng-admin。在我制作自定义页面时，我必须使用 UI 引导日期选择器。但弹出窗口不会出现。下面是我的代码。

这是我的自定义页面代码。

<div class="input-group datepicker">
  <input type="text" ng-model="rawValue" id="" name="{{ name }}" class="form-     control"
  uib-datepicker-popup="{{ format }}" is-open="isOpen" ng-required="{{v}}"/>
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="toggleDatePicker($event)">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>
</div>

这是我的 JavaScript 代码。

 $scope.rawValue = new Date();

 $scope.format = "yyyy-MM-dd";

 $scope.v = true;
 $scope.isOpen = false;

  $scope.toggleDatePicker = function ($event) {
  $event.preventDefault();
  $event.stopPropagation();

  };

请在这方面帮助我。

实际上，当我在“index.html”自定义页面日期选择器中包含 ui-bootsrap.min.js 文件时工作正常。但是 ng-admin 正常页面日期选择器和过滤器弹出窗口不起作用。

4

1 回答 1

0

因为您is-open="isOpen"在输入标签中使用并$scope.isOpen = false;在控制器中设置，但是当按钮单击时调用toggleDatePicker函数未设置$scope.isOpen = true;

所以需要设置$scope.isOpen = !$scope.isOpen;toggle

$scope.toggleDatePicker = function ($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.isOpen = !$scope.isOpen;
};

注意：确保您'ui.bootstrap'在模块中正确注入

angular.module('yourModuleName', ['ui.bootstrap'])

更新：

绝对应该包含ui-bootsrap.min.js在index.html文件中，因为ng-admin没有包含ui-bootsrap。所以你的模块会像：

angular.module('yourModuleName', ['ng-admin', 'ui.bootstrap']);
于 2016-04-24T08:30:10.930 回答