0
각도 및 부트 스트랩을 배우고 있습니다. Yeoman이 생성 한 코드가 있는데 내 탐색 막대의 정상 링크가 정상적으로 작동하는 상황이 있습니다. 그러나 드롭 다운 항목이 작동하지 않습니다 (드롭 다운은 탐색 모음에 나타나지만 클릭 할 때 확장되지 않습니다). 보시다시피 Navbar 코드를 뷰 자체에 넣었습니다.탐색 막대의 드롭 다운이 부트 스트랩 및 각도로 작동하지 않습니다.
재미있는 부분은 탐색 바코드가 실제로 컨테이너 (예 : index.html)에있을 때 작동한다는 것입니다.
내가 가지고있는 질문은 컨테이너에서 정상적으로 작동하는보기에서 내 Navbar 코드가 예상대로 작동하지 않는 이유는 무엇입니까?
<!-- The nav bar within the view.html does not work for drop down in the nav bar.
In the main 'index' file it works fine -->
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle glyphicon glyphicon-user"> Admin <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Log out</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<h1>'Allo, 'Allo</h1>
<p class="lead">
<img src="images/yeoman.png" alt="I'm Yeoman"><br>
Always a pleasure scaffolding your apps.
</p>
<p><a class="btn btn-lg btn-success" ng-href="#">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
</div>
<div class="row marketing">
<h4>HTML5 Boilerplate</h4>
<p>
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
</p>
<h4>Angular</h4>
<p>
AngularJS is a toolset for building the framework most suited to your application development.
</p>
<h4>Karma</h4>
<p>Spectacular Test Runner for JavaScript.</p>
</div>
<div class="footer">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
이 내 컨테이너에 대한 코드입니다 : 여기
는 탐색 막대보기에서 내 네비게이션 바 코드 (다른 탐색 모음 항목이 제대로 작동 할 것 것이 중요합니다) 작동하지 드롭 다운입니다 (index.html)가 Yoeman에 의해 생성되었습니다. 탐색 바코드는 위와 같아야합니다.<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<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,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="employerApp">
<!--[if lt IE 7]>
<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]-->
<!-- Putting this code back into the index does make the dropdown in the nav bar work -->
<!-- <nav id="myNavbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle glyphicon glyphicon-user"> Admin <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Log out</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav> -->
<!-- Add your site or application content here -->
<div class="container" ng-view=""></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
테스트하려면 Chrome을 사용 중이며 콘솔에서 오류가 표시되지 않습니다. 부트 스트랩 3을 사용하고 있습니다.
감사합니다.
감사합니다, GAJ
내가 당신의 메뉴 바의 code.Dropdown에서 문제를 볼 해달라고 href가 사용하는 것이
토글에서에 메뉴 점에 ID를 추가 클릭하면 제대로 펼쳐집니다. http://www.bootply.com/Cs2jxZIiLM – nej
안녕 신. angle.js 앱에서보기 (예 : index.html에 포함 된보기가 컨테이너에 있음)를보기에 삽입하면 작동하지 않는 것 같습니다. 크롬과 사파리를 사용해 보았습니다. Angular와 관련이 있는지 확신 할 수는 없지만 그럴 수 있다고 생각됩니다. 감사. – Gaj