AngularJS bootstrap.ui 模式未显示 [英] AngularJS bootstrap.ui modal not showing

问题描述

我正在尝试使用 AngularJS bootstrap.ui 显示模态对话框.当我执行 $modal.open(...) 时，屏幕会变灰，并且我的 templateUrl 中的 html 会从服务器调用，但没有模态显示.当我点击灰色区域时，模态关闭"，即灰色区域消失并且屏幕再次看起来正常.我不明白为什么我没有看到任何模式屏幕.

我正在尝试按照本教程进行操作:Angular 指令

我使用的是 Visual Studio 2013、MVC 5、AngularJS 1.2.2.

我正在使用 VS 项目附带的 bootstrap.css.它有模态类.我没有从 Javascript 控制台报告错误.我的应用定义如下:

var blogApp = angular.module('blogApp', ['ngResource', 'ngSanitize', 'ui.bootstrap']) ...blogApp.controller('blogController',函数 blogController($scope, $modal, $log, blogData, userData) {...$scope.showPrivacy = 函数(){$modal.open({模板网址:'/隐私'，控制器:'隐私实例控制器'});返回假；};});var PrivacyInstanceController = function($scope, $modalInstance) {$scope.close = function() {$modalInstance.close();};}

我的标记是:

<a ng-click="showPrivacy()">隐私政策</a>

知道为什么我的屏幕变灰了，/Privacy 资源正在加载，点击灰色时屏幕恢复正常，但没有出现模态?

解决方案

与之前完全相同的症状.不记得确切的细节，但我认为主要的问题是模态的实例总是 display:none.

1. 确保您使用带有模板的 ui-bootstrap (ui-bootstrap-tpls.js) -- 因为这会使您变灰可能会.
2. 在ui-bootstrap-tpls.js 中，转到最底部的modal 模板(您可以通过template/modal/window.html"找到它)) 并在那里添加 style="display:block".如果它无助于尝试将模板的 css 类与您的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)\">

");}]);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>");}]);

EDIT 您可以轻松地从 bootstrap.css 中删除 modal 类(及其子类)中的所有样式，其中 display 设置为 none -- bootstrap 只是隐藏 DOM 元素，而 ui-bootstrap 将其完全删除.

I am trying to display a modal dialog using AngularJS bootstrap.ui. When I do a $modal.open(...) the screen grays out and the html from my templateUrl get called from the server, but no modal displays. When I click on the gray area, the modal "closes", that is the gray area goes away and the screen looks normal again. I cannot figure out why I don't see any modal screen.

I am trying to follow this tutorial: Angular directives

I am using Visual Studio 2013, MVC 5, AngularJS 1.2.2.

I am using bootstrap.css that comes with the VS project. It has the modal classes in it. I am getting no error reported from the Javascript console. My app is defined as follows:

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();
    };
}

And my markup is:

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

Any idea why my screen is graying out, the /Privacy resource is getting loaded and the screen returns to normal when the gray is clicked, but no modal appears?

解决方案

Have exactly the same symptoms while ago. Do not remember the exact details, but I think the main problem was that the instance of the modal has always display:none.

1. Make sure that you are using the ui-bootstrap with templates (ui-bootstrap-tpls.js) -- as there is the effect of graying-out you probably do.
2. In ui-bootstrap-tpls.js go to the modal template at the very bottom (you can find it by: "template/modal/window.html") and add there style="display:block". If it will not help try to match css classes of the template against yourbootstrap.css`.

I personally used some custom version of bootstrap3, and now have got these as template:

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>");
}]);

EDIT You can easily remove from your bootstrap.css all styles in class modal (and its sub-classes) where display is set to none -- bootstrap just hides the DOM element, whereas ui-bootstrap removes it completely.

这篇关于AngularJS bootstrap.ui 模式未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！