打开和关闭时出现 $uib-modal 错误

Question

我在打开一个简单的模式弹出窗口时遇到问题。

我正在使用 uib-bootstrap 14.3、angular.js 1.4.7、bootstrap 3.3.5。

我遵循了我在网上找到的文档和示例，即使使用空白的模态模板，没有在模板内引用项目，我也会遇到同样的错误。现在，我传递给模式弹出窗口的一些对象具有长 JSON 日期格式的 DateTime 成员。

在我的 HTML 中，我在由索引跟踪的数据库日志记录上带有 ng-repeat 的表内有一个详细信息按钮：

<a href="#" class="btn btn-default" ng-click="open('lg', $index)">Details <i class="fa fa-eye"></i></a>

在控制器中，上述按钮的作用域是这样调用模态实例：

$scope.open = function (size, $index) {
    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'Modal.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        resolve: {
            item: function () {
                return $scope.$storage.items[$index];
            }
        }
    });

    modalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
    });
 };

模态控制器：

angular.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, item) {
     $scope.item = item;

     $scope.selected = {
         item: $scope.item
     };

     $scope.ok = function () {
         $uibModalInstance.close($scope.selected.item);
     };

     $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
     };
});

模态模板：

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">Item</h3>
        </div>
        <div class="modal-body">
            <p>{{item}}</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
             <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </div>
</div>

当我点击按钮时看到的错误，模态应该出现失去对背景的关注：

Error: [$injector:unpr] Unknown provider: parseDateFilterProvider <- parseDateFilter  http://errors.angularjs.org/1.4.7/$injector/unpr?p0=parseDateFilterProvider%20%3C-%20parseDateFilter

at angular.js?v=122215174314:68
at angular.js?v=122215174314:4289
at Object.getService [as get] (angular.js?v=122215174314:4437)
at angular.js?v=122215174314:4294
at Object.getService [as get] (angular.js?v=122215174314:4437)
at angular.js?v=122215174314:18229
at isStateless (angular.js?v=122215174314:13130)
at findConstantAndWatchExpressions (angular.js?v=122215174314:13187)
at angular.js?v=122215174314:13190
at forEach (angular.js?v=122215174314:336)

当我尝试按键盘上的 esc 按钮时，我得到：

TypeError: Cannot read property 'attr' of undefined

at Function.extend.removeClass (angular.js?v=122215174314:3568)
at m (angular-animate.js:1141)
at F (angular-animate.js:1198)
at angular-animate.js:889
at afterAnimating (ui-bootstrap-tpls-0.14.3.js?v=122215174314:3834)
at processQueue (angular.js?v=122215174314:14745)
at angular.js?v=122215174314:14761
at Scope.$eval (angular.js?v=122215174314:15989)
at Scope.$digest (angular.js?v=122215174314:15800)
at Scope.$apply (angular.js?v=122215174314:16097)

item 变量从 asp.net 后端引用此对象 3 个整数、1 个字符串和 1 个日期时间对象。

奇怪的是，即使我没有引用日期的任何内容，我仍然会看到日期解析提供程序错误。

Answer 1

您的问题不在模态中。将您的 plunk json 对象与引发异常的服务器端数据一起放入并检查差异。 我认为this question 对你有用。主要思想是您必须将 json 日期转换为 js Date 或使用 angular 内置 json 过滤器

{{item | json}}