1

У меня возникли проблемы с открытием простого модального всплывающего окна.

Я использую uib-bootstrap 14.3, angular.js 1.4.7, bootstrap 3.3.5.

Я следил за документацией и примерами, которые я нашел в Интернете и даже с пустым модальным шаблоном, не ссылаясь на элемент внутри шаблона, я получаю те же ошибки. Теперь некоторые из моих объектов, которые я передаю в модальное всплывающее окно, имеют длинные JSON-даты, отформатированные в DateTime.

В моем HTML У меня есть кнопка детали внутри таблицы с нг-повтором на бревно базы данных записей, отслеживаемых индекс:

<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 на клавиатуре I получить:

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) 

переменная элемент ссылается этот объект 3 целых числа, 1 строку и 1 DATETIME объект из asp.net бэкэндом.

Странная часть состоит в том, что даже если у меня нет ничего с датой, на которую я ссылаюсь, я все еще вижу ошибку поставщика синтаксиса даты.

+0

Возможный дубликат [AngularJS формат JSON строку вывода] (http://stackoverflow.com/questions/ 22785552/angularjs-format-json-string-output) – theodor

ответ

0

Ваша проблема не в модальном. Поместите в свой объект plunk json с данными на стороне сервера, которые вызывают исключение и проверяют разницу. Я думаю this question будет вам полезна. Основная идея заключается в том, что вы должны преобразовать вам JSon даты для Js Дата или использовать угловой встроенный фильтр JSon

{{item | json}} 
+0

Ладно, так безумно, что я получил его в Plunker, но не в моем проекте. Я попытался упростить его с помощью аналогичного кода, например, моего примера Plunker. Тем не менее, я все еще вижу ошибку синтаксического анализа даты. [link] (http://plnkr.co/edit/N2cy5sWejXGjJeXWOmzF) – adramalech

+0

В вашем плунке вы напечатали постоянную строку на модальном и это нормально, но в приложении вы пытаетесь распечатать объект json с датой и получили ошибку, вы должны присвоить такое же значение элементу в plunk, который вызвал ошибку в приложении. Кроме того, если это вас смущает, лучше удалить модальный код, в порядке, вы можете использовать его позже, но теперь осталось только переменная с данными на стороне сервера json и попробуйте распечатать ее и понять разницу. – theodor