AngularJS Dropdownmenü funktioniert mit Routing nicht mehr
0 
molily
AngularJS Dropdownmenü funktioniert mit Routing nicht mehr
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ß
-
Hallo,
Aus deinem Code werde ich nicht schlau, weil der interessante Code für das Dropdown fehlt. Aber ich kann eine Vermutung äußern:
Das Dropdown-Menü ist ein jQuery-Plugin, was beim DOM-ready aktiv wird. Schematisch:
$(document).ready(function() { $('.dropdown').macheIrgendwas() }). So funktionieren die meisten klassischen JavaScripte.Dieses Modell passt NICHT in eine Single-Page-Application, in der das Dropdown-HTML beim DOM-ready nicht im DOM ist, sondern erst wenn Angular die View rendert. Das ist eine Grundlage von den meisten Single-Page-Frameworks.
Wie du das in Angular löst, weiß ich nicht, aber mit ein wenig googlen zeigt sich, dass es entweder im Controller oder besser in einer Direktive gelöst wird:
Grüße
Mathias-
Ahhh, ja das Dropdown ist aus Bootstrap, wie das alles genau funktioniert weiß ich selbst nicht. Beschäftige mich erst seit ner Woche aufgrund einer Vorlesung mit der ganzen Thematik.
Dafür jetzt selbst eine Direktive o.Ä. zu schreiben wäre ein leichter Overkill.
Werde das dann wohl einfach mit einem weiteren Tab machen.Falls jmd zufällig eine Lösung dafür parat hat kann er sich trotzdem gerne melden. Werde mir den Link von dir auch mal aufmerksam durchlesen, vllt kapier ich davon ja auch was ;)
Schonmal vielen Dank für die sehr sehr schnelle Hilfe!
-