Navbar和AngularJS路由

我一直在設計一個響應式網頁，並且有角度路由。我有它的方式設置是這樣的Navbar和AngularJS路由

公共包含視圖文件夾（包含所有html文件）和index.html一切都通過服務。

現在知道了，我的響應式網頁正確加載了一切。雖然當我使用移動電話時，我將導航欄消失爲一個菜單，當它被點擊時，會顯示一個具有相同信息的側面導航欄。

當我將它加載到位於公用文件夾中的index.html時，它工作。當我對位於視圖文件夾中的其他HTML文件執行操作時，它將按預期方式加載網站，但點擊時菜單不會打開。

該導航欄在HTML坐落在views文件夾以及相關的JS

<!-- Navbar (sit on top) --> 
    <div class="w3-top" ng-controller="mainController"> 
    <ul class="w3-navbar w3-white w3-card-2" id="myNavbar"> 
     <li> 
     <a href="" ng-click="redirectToOtherPage()" class="w3-wide"><img src="./img/monkey.png" width="75" height="75"></a> 
     </li> 
     <!-- Right-sided navbar links --> 
     <li class="w3-right w3-hide-small"> 
     <a href="" ng-click="redirectToPackages()"><i class="fa fa-birthday-cake"></i> PACKAGES</a> 
     <a href="" ng-click="redirectToOpenPlay()"><i class="fa fa-child"></i> OPEN PLAY</a> 
     <a href="" ng-click="redirectToGallery()"><i class="fa fa-camera-retro"></i> GALLERY</a> 
     <a href="" ng-click="redirectToContact()"><i class="fa fa-envelope"></i> CONTACT</a> 
     <!--<a href="" ng-click="redirectToSignup()"><i class="fa fa-sign-in"></i> SIGN UP</a>--> 
     <a href="https://www.facebook.com/goinbananas/"><i class="fa fa-facebook-official fa-fb"></i></a> 
     <a href="https://www.instagram.com/goinbananas_frenchies/"><i class="fa fa-instagram fa-insta"></i></a> 
     </li> 
     <!-- Hide right-floated links on small screens and replace them with a menu icon --> 
     <li> 
     <a href="javascript:void(0)" class="w3-right w3-hide-large w3-hide-medium" onclick="w3_open()"> 
      <i class="fa fa-bars w3-padding-right w3-padding-left"></i> 
     </a> 
     </li> 
    </ul> 
    </div> 



<!-- Sidenav on small screens when clicking the menu icon --> 
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidenav"> 
    <a href="javascript:void(0)" onclick="w3_close()" class="w3-large w3-padding-16">Close ×</a> 
    <a href="" ng-click="redirectToPackages()"><i class="fa fa-birthday-cake"></i> PACKAGES</a> 
    <a href="" ng-click="redirectToOpenPlay()"><i class="fa fa-child"></i> OPEN PLAY</a> 
    <a href="" ng-click="redirectToGallery()"><i class="fa fa-camera-retro"></i> GALLERY</a> 
    <a href="" ng-click="redirectToContact()"><i class="fa fa-envelope"></i> CONTACT</a> 
    <!--<a href="" ng-click="redirectToSignup()"><i class="fa fa-sign-in"></i> SIGN UP</a>--> 
    <a href="https://www.facebook.com/goinbananas/"><i class="fa fa-facebook-official fa-fb"></i></a> 
    <a href="https://www.instagram.com/goinbananas_frenchies/"><i class="fa fa-instagram fa-insta"></i></a> 
</nav> 

<script> 
// Toggle between showing and hiding the sidenav when clicking the menu icon 
var mySidenav = document.getElementById("mySidenav"); 

function w3_open() { 
    if (mySidenav.style.display === 'block') { 
     mySidenav.style.display = 'none'; 
    } else { 
     mySidenav.style.display = 'block'; 
    } 
} 

// Close the sidenav with the close button 
function w3_close() { 
    mySidenav.style.display = "none"; 
} 
</script>

這是我的工作重定向

角重定向

var app = angular.module("myApp", ["ngRoute"]) 
    .config(function($routeProvider) { 
    $routeProvider 
    .when("/", { 
     templateUrl : "../views/index.html" 
    }) 
    .when("/packages", { 
     templateUrl : "../views/packages.html" 
    }) 
    .when("/contactus", { 
     templateUrl : "../views/contactus.html" 
    }) 
    .when("/signup", { 
     templateUrl : "../views/signup.html" 
    }) 
    .when("/gallery", { 
     templateUrl: "../views/gallery.html" 
    }) 
    .when("/openplay", { 
     templateUrl: "../views/openplay.html" 
    }) 
    .otherwise({ 
     redirectTo: "/" 
    }) 
});

這裏是index.html位於公用文件夾中

<!DOCTYPE html> 
<html> 
<head> 
    <script src="./js/angular.min.js"></script> 
    <script src="./js/angular-route.min.js"></script> 
    <script src="./js/app.js"></script> 
    <script src="./js/controllers/mainController.js"></script> 
    <script src="./js/controllers/contactController.js"></script> 
    <script src="./js/controllers/packagesController.js"></script> 
    <script src="./js/controllers/signupController.js"></script> 
    <script src="./js/controllers/galleryController.js"></script> 
    <script src="./js/controllers/openplayController.js"></script> 
    <base href="/" /> 
</head> 
<body ng-app="myApp"> 
<!--Div container--> 
<ng-view></ng-view> 

</body> 
</html>

控制器位於視圖中的index.html文件夾

var app = angular.module('myApp'); 
    app.controller('mainController', function($scope, $location){ 
    $scope.redirectToOtherPage = function(){ 
     $location.path("/"); 
    }; 
    $scope.redirectToContact = function(){ 
     $location.path("/contactus"); 
    }; 
    $scope.redirectToPackages = function(){ 
     $location.path("/packages"); 
    }; 
    $scope.redirectToSignup = function(){ 
     $location.path("/signup"); 
    }; 
    $scope.redirectToGallery = function(){ 
     $location.path("/gallery"); 
    }; 
$scope.redirectToOpenPlay = function(){ 
    $location.path("/openplay"); 
}; 
});

任何人都有一個想法，爲什麼導航欄不工作？路由工作100℅，但我發現自己有很多麻煩，因爲無法預料的發生。所有幫助表示讚賞！

編輯：當我刪除style="display:none"它一直保留，但鏈接。我相信這是w3_open（）和w3_close（）的錯誤。有任何想法嗎？我嘗試了鏈接，但沒有多大幫助。

來源

2017-01-20 user7412522

嘗試檢查了這一點，它可以幫幫忙：

http://stackoverflow.com/questions/14741988/twitter-bootstrap-navbar-with-angularjs-collapse-not-functioning

來源

2017-01-20 17:14:16

對不起，愚蠢的問題，但如何究竟這讓我受益？我希望我是一個側面導航，而不是下拉菜單。 – user7412522

該帖子已有更新。 – user7412522

Navbar和AngularJS路由

回答

相關問題