ui.bootstrap依赖注入
[英]ui.bootstrap Dependency Injection
问题描述
我无法理解为什么ui.bootstrap依赖项注入无法正常工作。 当我注入依赖项时，单个页面中的所有内容都消失了。 我在控制台日志中没有收到任何类型的错误。 我觉得我做的一切都很好，但是我需要一组新的眼睛来查看导致问题的原因。
(function(){ 'use strict'; angular.module('ghostApp',['ui.bootstrap']) .controller('GamesCtrl',['$scope','$http',function($scope,$http){ $scope.currentPage = 1; $scope.pageSize = 12; $http.get("json/games.json").success(function(data){ $scope.games = data; }); }]); })();
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <!-- build:css(.) styles/vendor.css --> <!-- bower:css --> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <!-- endbower --> <!-- endbuild --> <!-- build:css(.tmp) styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild --> </head> <body ng-app="ghostApp"> <!--[if lte IE 8]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Add your site or application content here --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <img class="navbar-brand" src="images/ghost.png"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <li class="page-scroll text-center"> <a href="#/home/">Home</a> </li> <li class="page-scroll text-center"> <a href="#/events/">Events</a> </li> <li class="page-scroll text-center"> <a href="#/games/">Games</a> </li> <li class="page-scroll text-center"> <a href="#/media/">Media</a> </li> <li class="page-scroll text-center"> <a href="#/about/">About</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div class="container-fluid margin-content"> <div ng-view=""></div> </div> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> <script> !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){ (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g), r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r) }(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-X'); ga('send', 'pageview'); </script> <!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp,app}) scripts/scripts.js --> <script src="scripts/app.js"></script> <script src="scripts/controllers/main.js"></script> <script src="scripts/controllers/about.js"></script> <script src="scripts/controllers/games.js"></script> <!-- endbuild --> </body> </html> <!---- games.html START ---> <input type="text" ng-model="searchGame" placeholder="Search for Game" > <div class = "row" ng-controller = "GamesCtrl"> <div class = "col-xs-6 col-md-3 well" ng-repeat = "game in games | filter: searchGame"> <a href = "#" class = "thumbnail"> <img style="height:100px"ng-src = "{{game.image}}" alt="{{game.name}}"> </a> <div class = "text-center">{{game.name}}</div> </div> <div class = "col-xs-12"> <pagination class = "pagination" total-items="games.length" ng-model="currentPage" items-per-page="pageSize"></pagination> </div> </div> <!---- games.html END --->
1 个解决方案
解决方案1
0 2015-10-19 22:17:53
刚刚删除了jQuery和bootstrap.js，并从CDN包含依赖项就看不到问题了。
(function(){ 'use strict'; angular.module('ghostApp',['ui.bootstrap']) .controller('GamesCtrl',['$scope','$http',function($scope,$http){ $scope.currentPage = 1; $scope.pageSize = 12; $http.get("json/games.json").success(function(data){ $scope.games = data; }); }]); })();
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <!-- build:css(.) styles/vendor.css --> <!-- bower:css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <!-- endbower --> <!-- endbuild --> <!-- build:css(.tmp) styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild --> </head> <body ng-app="ghostApp"> <!--[if lte IE 8]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Add your site or application content here --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <img class="navbar-brand" src="images/ghost.png"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <li class="page-scroll text-center"> <a href="#/home/">Home</a> </li> <li class="page-scroll text-center"> <a href="#/events/">Events</a> </li> <li class="page-scroll text-center"> <a href="#/games/">Games</a> </li> <li class="page-scroll text-center"> <a href="#/media/">Media</a> </li> <li class="page-scroll text-center"> <a href="#/about/">About</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div class="container-fluid margin-content"> <div ng-view=""></div> </div> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> <script> !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){ (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g), r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r) }(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-X'); ga('send', 'pageview'); </script> <!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp,app}) scripts/scripts.js --> <script src="scripts/app.js"></script> <script src="scripts/controllers/main.js"></script> <script src="scripts/controllers/about.js"></script> <script src="scripts/controllers/games.js"></script> <!-- endbuild --> </body> </html> <!---- games.html START ---> <input type="text" ng-model="searchGame" placeholder="Search for Game" > <div class = "row" ng-controller="GamesCtrl"> <div class = "col-xs-6 col-md-3 well" ng-repeat = "game in games | filter: searchGame"> <a href = "#" class = "thumbnail"> <img style="height:100px" ng-src="{{game.image}}" alt="{{game.name}}"> </a> <div class = "text-center">{{game.name}}</div> </div> <div class = "col-xs-12"> <pagination class = "pagination" total-items="games.length" ng-model="currentPage" items-per-page="pageSize"></pagination> </div> </div> <!---- games.html END --->
Angular ui.bootstrap手风琴和bootstrap3
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.