Угловая часть в HTML-страницы не отображается, если я с помощью ngroute

Я хочу, чтобы иметь фиксированное меню, это фиксированное меню называется: fixed_admin.html:Угловая часть в HTML-страницы не отображается, если я с помощью ngroute

<!DOCTYPE html> 
 
<!-- saved from url=(0069)https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/ --> 
 
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 

 
    <link rel="shortcut icon" href="images/puzzle.png" /> 
 
     
 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" /> 
 
<!-- <link rel="stylesheet" href="styles/angular-bootstrap-datepicker.css" /> --> <!-- penso di poterlo togliere --> 
 
    <link rel="stylesheet" href="styles/mainBoot.css"> 
 
    <link rel="stylesheet" href="styles/scrollbar.css"> 
 
    <link rel="stylesheet" href="styles/noscroll_numberfield.css"> 
 
    
 
    
 
    
 

 
    <!-- <script src="scripts/emailchecker.js"></script> --> 
 
    
 
<!-- <script src="scripts/angular-bootstrap-datepicker.js" charset="utf-8"></script> --> 
 
    <!-- <script src="scripts/number-directive.js"></script> --> 
 
    <script type="application/javascript"></script> 
 
    
 
    <title>Pannello Amministratore</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link href="./styles/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Custom styles for this template --> 
 
    <link href="./styles/dashboard.css" rel="stylesheet"> 
 

 
    <!-- Just for debugging purposes. Don't actually copy this line! --> 
 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
 

 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    <style id="holderjs-style" type="text/css"></style></head> 
 

 
    <body ng-app="myApp" background="images/sfondoblu3.png"> 
 

 
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand">FDDispenser</a> 
 
     </div> 
 
     <div class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="fixed_admin.html#/">Pannello Amministratore</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Settings</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Profile</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Help</a></li> 
 
      </ul> 
 
      <form class="navbar-form navbar-right"> 
 
      <input type="text" class="form-control" placeholder="Search..."> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-sm-3 col-md-2 sidebar"> 
 
      <ul class="nav nav-sidebar"> 
 
      <li class="active"><a href="fixed_admin.html#/showemp">Mostra Dipendenti</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Mostra Catalogo</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Mostra Macchinette</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Mostra Acquisti</a></li> 
 
      </ul> 
 
      <ul class="nav nav-sidebar"> 
 
      <li class="active"><a href="edit_employee.html">Aggiungi/Modifica Dipendente</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Crea/Modifica Catalogo</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Famiglia</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Categoria</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Produttore</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Ingrediente</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Fabbrica di produzione</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Macchinetta</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Tipologia Macchinetta</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Accessori</a></li> 
 
      </ul> 
 
      <ul class="nav nav-sidebar"> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Assegna Macchinetta a Dipendente</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Posiziona Macchinetta sul Territorio</a></li> 
 
      <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Assegna Prodotti a Macchinetta</a></li> 
 
      </ul> 
 
     </div> 
 
     <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 
 
      
 
      <div ng-view></div> 
 
      
 
      
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <!-- Bootstrap core JavaScript 
 
    ================================================== --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <!-- <script src="./Dashboard Template for Bootstrap_files/jquery.min.js.download"></script> --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
 
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script> --> 
 

 
     
 

 
    
 
     
 
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> 
 
    <script src="scripts/main-admin.js"></script> 
 

 
    <script src="scripts/jquery.js"></script> 
 
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> 
 
     
 
    <script src="./scripts/bootstrap.min.js.download"></script> 
 
    <script src="./scripts/docs.min.js.download"></script> 
 
     
 

 
</body></html>

Когда я нажмите на «Mostra Dipendenti» Я хочу видеть в середине той же страницы другой страницы (в), используя нг-маршрут от этого Js страницы называется ОСНОВНОЙ admin.js:

var app = angular.module("myApp", ["ngRoute"]); 
 
app.config(function($routeProvider) { 
 
    $routeProvider 
 
    .when("/", { 
 
     templateUrl : "home_admin.html" 
 
    }) 
 
    .when("/showemp", { 
 
     templateUrl : "show_employee.html" 
 
    }) 
 
    .when("/paris", { 
 
     templateUrl : "paris.htm" 
 
    }); 
 
});

страница, которую я хочу видеть, когда я нажимаю на эту кнопку является "show_employee.html":

<body ng-app="StaffManagement" ng-controller="StaffController"> 
 
<h2 class="sub-header" style="color:#4e67c3;">Elensco dipendenti</h2> 
 
      <div class="table-responsive"> 
 
      <table id="thetable"> 
 
       
 
       
 
       <tr> 
 
        <th class="th2">Nome</th> 
 
        <th class="th2">Cognome</th> 
 
        <th class="th2">Data di Nascita</th> 
 
        <th class="th2">Telefono</th> 
 
        <th class="th2">&nbsp;&nbsp;Sesso&nbsp;&nbsp;</th> 
 
        <th class="th2">&nbsp;StaffId&nbsp;</th> 
 
        <th class="th2">Email</th> 
 
      </tr> 
 
       
 
       
 
       <tr ng-repeat="staff in staffs"> 
 
        
 
      <td> {{ staff.name }}</td> 
 
      <td> {{ staff.surname }}</td>  
 
      <td> {{ staff.birthDate }}</td> 
 
      <td> {{ staff.phone }}</td> 
 
      
 
    
 
      <td> 
 
       <div ng-switch on="staff.gender"> 
 
       <span ng-switch-when="true">Uomo</span> 
 
       <span ng-switch-when="false">Donna</span> 
 
       </div> 
 
      </td> 
 
        
 
      
 
      <td> {{ staff.idstaff }}</td> 
 
      <td> {{ staff.staffLogin.email }}</td> 
 
    
 

 
      </tr> 
 
      
 
      </table> 
 
</body> 
 
    
 
     <script src="./scripts/bootstrap.min.js.download"></script> 
 
    <script src="./scripts/docs.min.js.download"></script> 
 
       
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> 
 
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script> --> 
 

 
<script src="scripts/deployeePanel.js"></script> 
 
     <script src="scripts/rest-services.js"></script> 
 
    <script src="scripts/jquery.js"></script> 
 
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> 
 
    <script src="scripts/angular.js"></script> 
 
    <!-- <script src="scripts/emailchecker.js"></script> --> 
 
    <script src="scripts/angular-bootstrap-datepicker.js" charset="utf-8"></script> 
 
    <!-- <script src="scripts/number-directive.js"></script> --> 
 
    <script type="application/javascript"></script>

Если я открываю только show_employee.html он хорошо работает:

Но когда я открываю i т от кнопки на fixed_admin.html, угловая часть пустует:

Нет ошибок из консоли:

Я не понимаю, почему угловой не работает, когда я использую нг -route. Я хочу видеть элемент первого изображения в fixed_admin.html #/showemp, но он пуст

источник

2016-12-22 Alfonso Silvestri

Просто отредактируйте привязку с помощью 'href =" #/showemp "'; угловой будет тот, который вызывает ваш html-файл –

href кнопки в /fixed_admin.html? Он не изменяется –

Поскольку вы не используете режим html5, хэштег действительно важен (это означает, что @Josue верна). Вы не попадаете по правильному маршруту, так что это просто не заполняет маршрут ничем. –

решаемых добавлении controller: "StaffController" и контроллера в основном-admin.js:

var app = angular.module("myApp", ["ngRoute"]); 
 
app.config(function($routeProvider) { 
 
    $routeProvider 
 
    .when("/", { 
 
     templateUrl : "home_admin.html" 
 
    }) 
 
    .when("/showemp", { 
 
     templateUrl : "provaEmp.html", 
 
     controller: "StaffController" 
 
    }) 
 
    .when("/paris", { 
 
     templateUrl : "paris.htm" 
 
    }); 
 
}); 
 

 
    app.controller("StaffController", function($scope, $filter, $http) { 
 
       
 
        
 
       $scope.staffs = []; 
 
       $scope.staffLast = []; 
 
       $scope.staffForm = { 
 
         idstaff : -1,  
 
         staffType: { 
 
         idstaffType: 2, 
 
         type: "Dipendente" 
 
         }, 
 
         name: "", 
 
         surname: "", 
 
         birthDate: "", 
 
         phone: "", 
 
         gender: true, 
 
         working: true, 
 
         staffLogin: { 
 
         idstaffLogin: -1, 
 
         email: "", 
 
         // pass: "", 
 
          
 
         } 
 
       }; 
 
       
 
       $scope.staffLoginForm = { 
 
         idstaffLogin: -1, 
 
         email: "", 
 
        // pass: "" 
 
       }; 
 
       
 
       $scope.selectg = [ 
 
        {name:'uomo', type: true}, 
 
        {name:'donna', type: false} 
 
       ]; 
 
       
 
       $scope.name = "Giacomo"; 
 
        $scope.staffForm.name = "Giacomo"; 
 
        $scope.staffForm.surname = "Brunetta"; 
 
        $scope.staffForm.phone = "3222565625"; 
 
        $scope.staffForm.idstaff = "1"; 
 
       $scope.staffForm.email = "[email protected]"; 
 
     
 

 
       
 
     });

источник

2016-12-23 01:17:34

Угловая часть в HTML-страницы не отображается, если я с помощью ngroute

ответ

Смежные вопросы