Question

我查看了一些示例，但我无法找到解决方法。我正在尝试注入＆＃39; ui.bootstrap＆＃39;在我的角度应用程序。这是index.hml和我的控制器：

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
    <link href="app-content/css/style.css" rel="stylesheet" />
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>   
    <script src="//code.angularjs.org/1.6.2/angular.min.js"></script>
    <script src="//code.angularjs.org/1.6.2/angular-route.min.js"></script>
    <script src="//code.angularjs.org/1.6.2/angular-cookies.min.js"></script>
    <script src="app-content/js/jquery.matchHeight.js" type="text/javascript"></script>
    <script src="/GuestBookProject/node_modules/angular-gravatar/build/angular-gravatar.js"></script>

    <script src="app.js"></script>
    <script src="app-services/authentication.service.js"></script>
    <script src="app-services/flash.service.js"></script>
    <script src="app-services/user.service.js"></script> 
    <script src="app-services/universal.service.js"></script>
    <script src="navbar/navbar.controller.js"></script>
    <script src="main/main.controller.js"></script>   
    <script src="review/review.controller.js"></script>  
    <script type="text/javascript" src="app-content/js/slick.min.js"></script>

    <script src="https://use.fontawesome.com/be81ee5934.js"></script>
    <script src="app-content/js/script.js"></script>

这是我的控制者：

(function () {
'use strict';

angular.module('app').controller('MainController', MainController);

MainController.$inject = ['$location', 'AuthenticationService', 'FlashService', 'UniversalService', '$scope', '$sce', '$rootScope','ui.bootstrap', 'ui.router'];
function MainController($location, AuthenticationService, FlashService, UniversalService, $scope, $sce, $rootScop) {
   var vm = this;
    vm.allreviews = [];
    vm.allusers=[];
    vm.allemails=[];
    vm.all=[];

    loadAllReviews();
    loadAllEmails();
    loadAllUsers();
    loadAll();

    $scope.rate = 1;
    $scope.max = 10;
    $scope.isReadonly = false;

    $scope.hoveringOver = function(value) {
        $scope.overStar = value;
        $scope.percent = 100 * (value / $scope.max);
    };

    $scope.ratingStates = [
{stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
{stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
{stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
{stateOn: 'glyphicon-heart'},
{stateOff: 'glyphicon-off'}

尝试注入后我得到错误：

code.angularjs.org/1.6.2/angular.min.js:122 Error: [$injector:unpr] http://errors.angularjs.org/1.6.2/$injector/unpr?p0=ui.bootstrapProvider%20%3C-%20ui.bootstrap%20%3C-%20MainController
at https://code.angularjs.org/1.6.2/angular.min.js:6:425
at https://code.angularjs.org/1.6.2/angular.min.js:44:374
at Object.d [as get] (https://code.angularjs.org/1.6.2/angular.min.js:42:92)
at https://code.angularjs.org/1.6.2/angular.min.js:44:436
at d (https://code.angularjs.org/1.6.2/angular.min.js:42:92)
at e (https://code.angularjs.org/1.6.2/angular.min.js:42:333)
at Object.instantiate (https://code.angularjs.org/1.6.2/angular.min.js:43:240)
at https://code.angularjs.org/1.6.2/angular.min.js:93:141
at Object.link (https://code.angularjs.org/1.6.2/angular-route.min.js:7:322)
at https://code.angularjs.org/1.6.2/angular.min.js:16:71

Answer 1

您的代码存在一些问题。

首先，我没有看到任何引用ui-bootstrap js文件的脚本标记。把它们添加到你的头上：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

其次，ui-bootstrap是模块，因此您应该将它们添加到模块依赖项中：

angular.module("app", [
    "ui.bootstrap",
    "ui.router" // the same goes for this one
]);

小编，你加载bootstrap.css两次（也有不同的版本）：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

你应该删除其中一个。

在angularjs中注入bootstrap

1 个答案: