Question

我的代码如下所示：

的index.html

<!DOCTYPE html>
<html>

<head>
    <title>quflip</title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/login.css">
</head>

<body ng-app="quflipMobWeb">
    <ng-view></ng-view>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controller/loginController.js"></script>
    <script src="js/controller/homeController.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controller/driverController.js"></script>
    <script src="js/controller/driversController.js"></script>
    <script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
        }
    </script>
</body>

</html>

home.html的

<div>

    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
    </div>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>

homeController.js

angular.module('quflipMobWeb.homeController', []).
controller('homeController', function($scope) {
    // console.log("home called");
});

app.js

angular.module('quflipMobWeb', [
    'quflipMobWeb.services',
    'quflipMobWeb.controllers',
    'quflipMobWeb.login',
    'quflipMobWeb.homeController',
    'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when("/home", { templateUrl: "template/home.html", controller: "homeController" }).
    when("/login", { templateUrl: "template/login.html", controller: "loginController" }).
    otherwise({ redirectTo: '/login' });
}]);

有关详细代码，我在此处提供了我的存储库URL：

https://github.com/mrugesh008/testRepo.git

这是我为实现效果而关注的网站

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

Answer 1

您的代码几乎运行良好。您只需添加ng-style：

即可

app.controller('homeController', function($scope) {
    console.log("home called");

    $scope.myStyle = {
      width: '0px'
    };

    $scope.openNav = function() {
        $scope.myStyle.width = '250px';
    }

     $scope.closeNav = function() {
        $scope.myStyle.width = '0px';
    }    
});

Home.html中

<div>
    <div id="mySidenav" class="sidenav" ng-style="myStyle">
        <a href="" class="closebtn" ng-click="closeNav()">&times;</a>
        <a href="">About</a>
        <a href="">Services</a>
        <a href="">Clients</a>
        <a href="">Contact</a>
    </div>
    <span style="font-size:30px;cursor:pointer" ng-click="openNav()">&#9776; open</span>
</div>

Demo Plunker

侧导航在角度代码中不起作用

1 个答案: