側ナビゲーションは、角度コードでは動作しない

以下に示すように私のコードは次のとおり側ナビゲーションは、角度コードでは動作しない

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

出典

2017-09-07 Mrugesh Thaker

を達成するために、次の午前ウェブサイトですほとんどうまくいく。あなただけ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

出典

2017-09-07 12:48:45

あなたがより多くの質問が必要な場合は、私のデモを取るあなたのコードを追加します –

側ナビゲーションは、角度コードでは動作しない

答えて

関連する問題