如果我使用ngroute，則html頁面中的角部分不會出現
[英]Angular part in a html page doesn't appear if I using ngroute
問題描述
我想要一個固定菜單，該固定菜單稱為：fixed_admin.html：
<!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頁面中的ng-route稱為main-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"> Sesso </th> <th class="th2"> StaffId </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，則效果很好：
但是，當我從fixed_admin.html上的按鈕打開它時，棱角部分為空：
控制台沒有錯誤：
我不明白為什么使用ng-route時angular無法使用。 我想在fixed_admin.html＃/ showemp中看到第一個圖像的元素，但是它為空
1 個解決方案
解決方案1
0 已采納 2016-12-23 01:17:34
解決了添加controller: "StaffController"和main-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 = "asdasd@dasd.it"; });
使用 Angular4 從服務器加載信息時，HTML 無法正確顯示
[英]HTML Doesn't Appear Correctly When Loading Information From Server Using Angular4
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.