AngularJS bootstrap.ui модальный, не показывающий

Я пытаюсь отобразить модальный диалог, используя AnglerJS bootstrap.ui. Когда я делаю $modal.open(...), экран становится серым, а html из моего шаблонаUrl вызывается с сервера, но нет модальных дисплеев. Когда я нажимаю на серой области, модальная "закрывается", то есть серая область уходит, и экран снова выглядит нормально. Я не могу понять, почему я не вижу никакого модального экрана.

Я пытаюсь следовать этому руководству: Angular директивы

Я использую Visual Studio 2013, MVC 5, AngularJS 1.2.2.

Я использую bootstrap.css, который поставляется с проектом VS. В нем есть модальные классы. Я не сообщаю об ошибке с консоли Javascript. Мое приложение определяется следующим образом:

var blogApp = angular.module('blogApp', ['ngResource', 'ngSanitize', 'ui.bootstrap']) ...

blogApp.controller('blogController',
function blogController($scope, $modal, $log, blogData, userData) {

    ...

    $scope.showPrivacy = function() {
        $modal.open({
            templateUrl: '/Privacy',
            controller: 'PrivacyInstanceController'
        });
        return false;
    };
});


var PrivacyInstanceController = function($scope, $modalInstance) {
    $scope.close = function() {
        $modalInstance.close();
    };
}

И моя разметка:

<div ng-controller="blogController">
        <a ng-click="showPrivacy()">Privacy Policy</a>
    </div>

Любая идея, почему мой экран выглядит, ресурс /Privacy загружается, и экран возвращается в нормальное состояние при нажатии серого, но модальный не отображается?

Ответы

Ответ 1

Имеют те же симптомы, что и раньше. Не помните точные детали, но я думаю, что основная проблема заключалась в том, что экземпляр модала всегда display:none.

  • Убедитесь, что вы используете ui-bootstrap с шаблонами (ui-bootstrap-tpls.js) - так как есть эффект высечки, который вы, вероятно, делаете.
  • В ui-bootstrap-tpls.js перейдите к шаблону modal в самом низу (вы можете найти его по: "template/modal/window.html" ) и добавить там style="display:block". If it will not help try to match css classes of the template against your bootstrap.css`.

Я лично использовал какую-то пользовательскую версию bootstrap3, и теперь получил их как шаблон:

angular.module("template/modal/backdrop.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/backdrop.html",
    "<div class=\"modal-backdrop fade\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1040 + index*10}\" ng-click=\"close($event)\"></div>");
}]);

angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/window.html",
    "<div class=\"modal fade {{ windowClass }}\" ng-class=\"{in: animate}\" style='display:block;z-index:1050'  ng-transclude></div>");
}]);

РЕДАКТИРОВАТЬ. Вы можете легко удалить из своих стилей bootstrap.css все в классе modal (и его подклассах), где display установлен на none - bootstrap просто скрывает элемент DOM, тогда как ui-bootstrap полностью удаляет его.

Ответ 3

У меня была такая же проблема. Что я сделал, чтобы исправить это, было изменить то, что у меня было в файле template.html.html, предоставленном с помощью свойства templateUrl в открытой функции.

У меня была полная модальная разметка:

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">And here some modal markup</div></div></div>

Когда я удалил первые три div и оставил And here some modal markup в файле template.html, он работал нормально!

Ответ 4

По какой-то странной причине модальная высота фона не установлена ​​для заполнения окна, чтобы исправить это в ui-bootstrap-tpls.js, я пошел в строку template/modal/backdrop.html внизу и добавил следующие параметры стиля 'width':'100%', 'height':'100%'

Ответ 5

Я обновился до bootstrap v3.3.4, и теперь он работает для меня.

  • Angularjs v1.3.12
  • Ui-самозагрузка-0.12.0
  • ui.bootstrap.tpls-0.12.0