Question

我正在尝试使用AngularJS bootstrap.ui来显示一个模态对话框。当我在屏幕行上出现$ modal.open（...）时。在我有问题屏幕灰色之前（AngularJS bootstrap.ui modal not showing已解决这个问题，我添加了一个新的bootstrap css 我无法弄清楚为什么我看不到任何模态屏幕。我正在使用Visual Studio 2013，MVC 5，AngularJS 1..2。我正在尝试遵循本教程：http://angular-ui.github.io/bootstrap/; 我没有从Javascript控制台报告错误。我的应用程序定义如下：

 var app = angular.module("app", ["ngGrid", "ui.bootstrap"]);
    app.controller("CtrlController", function ($scope, $http, $log, $modal) {
 $scope.on = function () {
           ....
            var modalInstance=  $modal.open(
                {
                    templateUrl: 'http://localhost:58652/Home/TestView',
                    controller: "CtrlController",

                }
            );

        }

我的标记是：

<div ng-click="on()" class="gridStyle" ng-grid="gridOptions">
</div>
<button ng-click="on()" type=button class="btn">Добавить</button>

我的TestView：

<script type="text/ng-template" id="TestView">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a ng-click="selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

另一个问题：为什么要采用html-content
放入

<script type="text/ng-template" id="TestView">

Answer 1

如果您使用<script type="text/ng-template" id="TestView"></script>，则ID应为TestView.html（良好做法）

然后，如果您使用text/ng-template templateUrl应该等于id。

在您的情况下templateUrl: 'TestView'

AngularJS bootstrap.ui模式没有显示正确

1 个答案: