在angularjs中注入引导

我查看了一些示例，但找不到解决此问题的方法。我正在尝试在我的角度应用程序中注入'ui.bootstrap'。这是index.hml和我下面的控制器：在angularjs中注入引导

<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

来源

2017-06-22 user122222

我没有看到有'ui-bootstrap'库的脚本标签。请阅读[开始]（https://angular-ui.github.io/bootstrap/#!#getting_started）。另外请注意，你正在加载两个版本的引导程序的CSS文件，你不应该这样做。除此之外，您应该将库定义为模块依赖项，而不是控制器之一（'angular.module（“app”，[“ui.bootstrap”]'） – devqon

试试这个 - https://www.google.co.in/ ＃q = Error：+ [$ injector：unpr] + –

'ui.bootstrap'是一个**模块**，您需要将它添加到您的'app'模块的依赖列表中，而不是在您的控制器的$ inject'属性中 – Phil

有几件事情错了与您的代码。

首先，我没有看到任何引用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">

您应该删除其中的一个。

来源

2017-06-22 06:48:19 devqon

我也会失去jQuery和'bootstrap.js'文件，它们在AngularJS应用程序中不是必需的，甚至可能导致冲突 – Phil

在angularjs中注入引导

回答

相关问题