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

时间:2015-12-29 18:50:29

标签: javascript angularjs html5 twitter-bootstrap-3 angular-ui-bootstrap

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

我使用的是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个日期时间对象。

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

1 个答案:

答案 0 :(得分:0)

你的问题不在模态中。使用服务器端数据输入plunk json对象,该数据抛出异常并检查差异。 我认为this question对你有用。主要的想法是你必须将json日期转换为js Date或使用angular内置json过滤器

{{item | json}}