asdf123: AngularJS Dropdownmenü funktioniert mit Routing nicht mehr

Beitrag lesen

SELF-Forum

AngularJS Dropdownmenü funktioniert mit Routing nicht mehr

asdf123
– Informationen zu den Bewertungsregeln

Hi Leute,

Experimentiere zZ. etwas mit AngularJS und habe dabei ein kleines Problem. Ich versuch nun einfach mal hier mein Glück, da Foren speziell zu diesem Thema wohl noch etwas rar sind.

Wenn ich meinen gesamten Code in die index.html stecke funktioniert alles, wenn ich aber mittels Routing meine Seite zusammenbaue funktioniert das meiste, jedoch das Dropdownmenü nicht. Soll heisen, beim drüber fahren oder drauf klicken passiert einfach nichts. Die Navigation über die Home bzw. Kunden Tabs funktionieren ohne Probleme

Habe auch so nicht viel Ahnung von dem Thema, vllt sieht ja von euch wer was.

index.html

  
<!DOCTYPE html>  
<html ng-app="app">  
<head>  
  <meta charset="utf-8">  
  <title>Test</title>  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <meta name="description" content="">  
  <meta name="author" content="">  
  
  <link href="css/bootstrap.min.css" rel="stylesheet">  
  <link href="css/style.css" rel="stylesheet">  
  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">  
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">  
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">  
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">  
  <link rel="shortcut icon" href="img/favicon.png">  
  
    <script src="js/angular.min.js"></script>  
    <script src="js/angular-route.min.js"></script>  
  	<script src="js/app.js"></script>  
	<script type="text/javascript" src="js/jquery.min.js"></script>  
	<script type="text/javascript" src="js/bootstrap.min.js"></script>  
	<script type="text/javascript" src="js/scripts.js"></script>  
	  
</head>  
<body ng-controller="MainCtrl">  
<div class="container">  
	<div class="row clearfix">  
		<div class="col-md-12 column">  
			<div class="page-header">  
				<h1>  
					Webshop  
				</h1>  
			</div>  
		</div>  
	</div>  
	<div ng-view></div>  
</div>  
</body>  
</html>

view1.html

  
<div class="row clearfix">  
		<div class="col-md-12 column">  
			<ul class="nav nav-tabs">  
				<li class="active">  
					<a href="#">Home</a>  
				</li>  
				<li>  
					<a href="#/kundensuche">Kunden</a>  
				</li>  
				<li class="dropdown pull-left">  
					 <a href="#" data-toggle="dropdown" class="dropdown-toggle">Artikel<strong class="caret"></strong></a>  
					<ul class="dropdown-menu">  
						<li>  
							<a href="#">Suchen</a>  
						</li>  
						<li>  
							<a href="#">Hinzufügen</a>  
						</li>  
						<li>  
							<a href="#">Ändern</a>  
						</li>  
					</ul>  
				</li>  
			</ul>  
		</div>  
	</div>  
	<div class="row clearfix">  
		<div class="col-md-12 column">  
			<h2>  
				Heading  
			</h2>  
			<p>  
			TestTestTest  
			</p>		  
		</div>  
	</div>

app.js

  
var app = angular.module('app', ['ngRoute']);  
  
app.controller('MainCtrl', function($scope){  
  
});  
  
app.config(function ($routeProvider) {  
    $routeProvider  
        .when('/', {  
            controller: 'MainCtrl',  
            templateUrl: 'view1.html'  
        })  
        .when('/kundensuche', {  
            controller: 'MainCtrl',  
            templateUrl: 'KundenSuche.html'  
        })  
		  
		 .when('/artikelsuche', {  
            controller: 'MainCtrl',  
            templateUrl: 'ArtikelSuche.html'  
        })  
  
        .otherwise({ redirectTo: '/' });  
});

Schonmal danke im voraus,
Gruß

Beitrag melden
–
Informationen zu den Bewertungsregeln