Question

我已将ui.bootstrap添加到我的控制器中：

angular.module('myApp', ['ui.bootstrap']).controller('ClientController', function($scope, $uibModal, ClientService) {});

我也已将bootstrap-tpls添加到我的index.html文件中。

在index.html内，有带有按钮的导航栏。单击后，应该显示与上述控制器相关的.html，该控制器隐藏在<div ng-view></div>内。

但是，当单击时，它什么也没做-不显示任何html页面。另外，它不会显示与另一个控制器（ClientController）相关的html页面。

删除['ui.bootstrap']并单独留下angular.module('myApp')会使ng-view可见，但会抛出（按预期，我认为是）错误：

“未知提供程序：$ uibModalProvider <-$ uibModal <-ClientController”。

为什么ng-view没有在模块表中设置ui.bootstrap的情况下运行？

编辑：

导航栏：

<nav class="navbar navbar-default">
        <div class="container-fluid">
        <div class="navbar-header">
                <a class="navbar-brand" href="#">App</a>
        </div>
                <ul class="nav navbar-nav">
                <li class="active"><a href="#/">Main</a></li>
                <li><a href="#/client">Client</a></li>
                <li><a href="#/admin">Admin</a></li>
                </ul>
        </div>
</nav>
<div style="
margin-bottom: 30%;
margin-right: 20%;
margin-left: 20%;
margin-top: 10%;"
ng-view></div>

app.js：

'use strict';

var app = angular.module("myApp", ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when("/client", {
        templateUrl : "client",
        controller  : "ClientController as cCtrl"
    })
    .when("/admin", {
        templateUrl : "admin",
        controller : "AdminController as aCtrl"
    })
}]);

编辑2：

在创建控制器时将'ui.bootstrap'移至app.js并使用app变量无法解决问题-存在错误：

未知提供者：$ uibModalProvider <-$ uibModal <-ClientController

现在的代码如下：

app.js：

var app = angular.module（“ myApp”，['ngRoute'，'ui.bootstrap']）;

ClientController：

app.controller('ClientController', function($scope, $uibModal, ClientService) {})

编辑3：

脚本标签：

<head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="static/js/app.js"></script>
        <script src="static/js/controller/AdminCtrl.js"></script>
        <script src="static/js/service/AdminService.js"></script>
        <script src="static/js/controller/ClientCtrl.js"></script>
        <script src="static/js/service/ClientService.js"></script>
        <link rel="stylesheet" href="static/css/styles.css">
        <meta charset="UTF-8">
</head>

Answer 1

使您的index.jsp像这样

    <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script 
             <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
           src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script src="static/js/app.js"></script>
            <script src="static/js/controller/AdminCtrl.js"></script>
            <script src="static/js/service/AdminService.js"></script>
            <script src="static/js/controller/ClientCtrl.js"></script>
            <script src="static/js/service/ClientService.js"></script>
            <link rel="stylesheet" href="static/css/styles.css">
            <meta charset="UTF-8">
    </head>

添加ui.bootstrap后未显示ng-view

1 个答案: