html - 带有侧导航栏的 Ng-show

Question

所以我一直在尝试在一个网站上工作，但我似乎偶然发现了一个错误。我正在使用 Angular 路由的单页网站上工作。

我没有使用 bootstrap，我宁愿不用它。我的问题是我试图在单击菜单时打开(或显示)侧边栏。

下面是我的代码:

<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>
    <div class="w3-right w3-hide-large w3-hide-medium">
      <a href="" ng-click="sidenav = !sidenav" class="btn btn-primary btn-lg"><i class="fa fa-bars w3-padding-right w3-padding-left"></i></a>
    </div>
        <!-- Sidenav on small screens when clicking the menu icon -->
      <div class="w3-sidenav w3-white w3-card-2 w3-animate-left w3-hide-medium w3-hide-large" style="display:block" ng-show="sidenav" ng-controller="mainController">
        <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>
      </div>
  </li>
</ul>

这是我的 Controller :

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");
};
$scope.sidenav = false;
});

我是不是漏掉了什么？我一整天都被难住了，我想至少感觉自己在朝着正确的方向前进。

Answer 1

你的模块应该有依赖注入(inject)，

var app = angular.module('myApp',[]);