AngularJS ngInclude指令在編譯時總是被注釋
[英]Angularjs ngInclude directive always gets commented when compiled
問題描述
我正在制作公交車預訂系統。 為此，我想使用angularjs的ng-include指令添加登錄頁面（這是一個單獨的html文件），但是每次添加它時，它都會編譯並被注釋。 另外，我嘗試了一些在stackoverflow上找到的解決方案（我已經在html文件中添加了注釋），但沒有用。
<div class="login-page"> <div class="form" ng-controller="loginController"> <form action="/" class="login-form" id="myLogin"> <input type="text" placeholder="username" ng-model="username"/> <input type="password" placeholder="password" ng-model="password"/> <button type="button" ng-click="submit()">login</button> <p class="message">Not registered? <a href="#">Create an account</a></p> </form> </div> </div>
<div class="login-page"> <div class="form" ng-controller="loginController"> <form action="/" class="login-form" id="myLogin"> <input type="text" placeholder="username" ng-model="username"/> <input type="password" placeholder="password" ng-model="password"/> <button type="button" ng-click="submit()">login</button> <p class="message">Not registered? <a href="#">Create an account</a></p> </form> </div> </div>
。
var app = angular.module( 'myapp', ['ngRoute']); app.config( function($routeProvider){ $routeProvider .when( '/', { templateUrl: 'loginPage.html' }) .when( '/reservationPage',{ templateUrl: 'reservationPage.html' }) .otherwise( { redirectTo: '/' }); }); app.controller( 'loginController', function($scope){ $scope.submit = function(){ var uname = $scope.username; var pswd = $scope.password; if( uname == 'admin' && pswd =='admin'){ $location.path('/reservationPage'); } else{ alert('Wrong stuff'); } }; });
@import url(https://fonts.googleapis.com/css?family=Roboto:300); .login-page { width: 360px; padding: 8% 0 0; margin: auto; } .form { position: relative; z-index: 1; background: #FFFFFF; max-width: 360px; margin: 0 auto 100px; padding: 45px; text-align: center; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } .form input { font-family: "Roboto", sans-serif; outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; } .form button { font-family: "Roboto", sans-serif; text-transform: uppercase; outline: 0; background: #4CAF50; width: 100%; border: 0; padding: 15px; color: #FFFFFF; font-size: 14px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; } .form button:hover,.form button:active,.form button:focus { background: #43A047; } .form .message { margin: 15px 0 0; color: #b3b3b3; font-size: 12px; } .form .message a { color: #4CAF50; text-decoration: none; } .form .register-form { display: none; } .container { position: relative; z-index: 1; max-width: 300px; margin: 0 auto; } .container:before, .container:after { content: ""; display: block; clear: both; } .container .info { margin: 50px auto; text-align: center; } .container .info h1 { margin: 0 0 15px; padding: 0; font-size: 36px; font-weight: 300; color: #1a1a1a; } .container .info span { color: #4d4d4d; font-size: 12px; } .container .info span a { color: #000000; text-decoration: none; } .container .info span .fa { color: #EF3B3A; }
<!doctype html> <html> <head> <title>BookUrBus</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script> <script src="ngcontroller.js"></script> <link rel="stylesheet" type="text/css" href="CssLoginPage.css"> </head> <body> <div ng-app="myapp" ng-controller="loginController"> <ng-include src="'/loginPage.html'"></ng-include> <!-- <ng-include src="loginPage.html"></ng-include> --> <!-- <div ng-include="'/loginPage.html'"></div> --> <!-- <div ng-include="loginPage.html"></div> --> </div> </body> </html>
1 個解決方案
解決方案1
0 已采納 2016-05-29 13:35:32
問題解決了。 實際上，我在D驅動器上使用本地主機，文件位於D：\\ AngularRepo \\ ngWorks \\ BusReservationSystem \\ login.html中。
因此，或者ng-include中的src應該是完整路徑（即\\ AngularRepo \\ ngWorks \\ BusReservationSystem \\ login.html），或者您可以將其托管在該位置本身（即，在BusReservationSystem）並運行。
使用ngInclude w / QUnit的單元測試AngularJS指令時出錯
[英]Error When Unit Testing AngularJS Directive that uses ngInclude w/ QUnit
Angularjs：使用路由 - 不編譯或不識別自定義指令
[英]Angularjs: Using routing - the custom directive is not compiled or not recognized
IntersectionObserver並不總是在angularjs指令中觸發
[英]IntersectionObserver not always firing in angularjs directive
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.