Question

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

我没有使用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>

这是我的控制器：

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

你的模块应该注入depndency，

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

Answer 2

尝试在ng-click事件中使用函数。

而不是

 ng-click="sidenav = !sidenav"

尝试使用

 ng-click="openMenu()"

并在控制器中

 $scope.openMenu = function(){
  $scope.sidenav = true;
 }

Answer 3

您没有注入依赖项

var app = angular.module('myApp', []);
app.controller('mainController', ['$scope', '$location',
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;
});

Ng-show with sidenav bar

3 个答案: