頁面無法正確呈現Angular js
[英]page not rendering properly angular js
問題描述
我是Angular JS的新手，正在為某些學術要求而學習它。 問題是我有一個登錄頁面，三種類型的用戶可以通過該頁面登錄。登錄后，將根據條件正確重定向，但登錄頁面未正確呈現。 如果我將此着陸頁的整個代碼放在“ index.html”中，則頁面將完美呈現。有與ul標簽關聯的li標簽，這些標簽與li標簽上的click事件一起充當子菜單。 將它們放置在index.html中時，它們可以完美地工作，但是使用狀態轉換將其加載到ui視圖中時，它們不能工作。我使用“狀態”在各部分之間進行切換。 沒有錯誤被記錄，我找不到原因。 我希望我已經包括了必要的代碼。如果問題不清楚，我可以提供完整的代碼。
請幫忙。
app.js
'use strict';
angular.module('Authentication', []);
//angular.module('Home', []);
angular.module('Registration', []);
angular.module('Dental', ['ui.router','Authentication','Registration'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$stateProvider
// State - User Login
.state('login', {
url: "/login",
templateUrl: "app/authentication/views/login.html",
controller: "AuthenticationController"
})
// State - Admin Landing Page
.state('admin', {
//abstract: true,
url: "/admin",
templateUrl: "app/admin/home/views/admin_main.html",
controller: "RegistrationController"
})
// State - Admin Sub Pages - Registration Page
.state('register', {
parent: 'admin',
url:'/register',
views: {
'admin@admin' : {
templateUrl: "app/admin/settings/views/clinicDetail.html",
}
},
controller: "RegistrationController"
})
// State - Admin Sub Pages - Personal Details Page
.state('register.personal', {
parent: 'register',
url:'/personal-details',
views : {
'registration' : {
templateUrl : 'app/admin/registration/views/personalDetails.html'
}
}
})
}])
index.html
<html ng-app="Dental">
<head>
<!--- Style Sheets --->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" type="text/css"/>
<link rel="stylesheet" href="app/css/custom.css" type="text/css"/>
<link rel="stylesheet" href="app/css/animate.css" type="text/css"/>
<link rel="stylesheet" href="app/css/waves.css" type="text/css"/>
<link rel="stylesheet" href="app/css/layout.css" type="text/css"/>
<link rel="stylesheet" href="app/css/component.css" type="text/css"/>
<link rel="stylesheet" href="app/css/plugins.css" type="text/css"/>
<link rel="stylesheet" href="app/css/common-styles.css" type="text/css"/>
<link rel="stylesheet" href="app/css/pages.css" type="text/css"/>
<link rel="stylesheet" href="app/css/responsive.css" type="text/css"/>
<link rel="stylesheet" href="app/css/matmix-iconfont.css" type="text/css"/>
<link rel="stylesheet" href="app/font-awesome/css/font-awesome.css" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet" type="text/css">
<script src="node_modules/angular/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<div ui-view>
<div class="jumbotron">
<div class="container">
<div class="col-xs-offset-2 col-xs-8">
<h3> Clinic Management System </h3>
<a ui-sref="login"> <button class="btn btn-success"> Start </button> </a>
</div>
</div>
</div>
</div>
<script src="app/js/jquery.js"></script>
<script src="app/js/bootstrap.js"></script>
<script src="app/js/jquery-migrate.min.js"></script>
<script src="app/js/jRespond.min.js"></script>
<script src="app/js/nav-accordion.js"></script>
<script src="app/js/hoverintent.js"></script>
<script src="app/js/waves.js"></script>
<script src="app/js/switchery.js"></script>
<script src="app/js/jquery.loadmask.js"></script>
<script src="app/js/icheck.js"></script>
<script src="app/js/select2.js"></script>
<script src="app/js/bootbox.js"></script>
<script src="app/js/animation.js"></script>
<script src="app/js/colorpicker.js"></script>
<script src="app/js/sweetalert.js"></script>
<script src="app/js/moment.js"></script>
<script src="app/js/fullcalender.js"></script>
<script src="app/js/layout.init.js"></script>
<script src="app/js/matmix.init.js"></script>
<!--- Controllers --->
<script src="app/authentication/authenticationController.js"></script>
<script src="app/authentication/service.js"> </script>
<script src="app/admin/registration/registrationController.js"></script>
admin_main.html
<div class="left-navigation">
<ul class="list-accordion">
<li><a href="#" class="waves-effect"><span class="nav-icon"><i class="fa fa-home"></i></span>
<span class="nav-label">Home</span> </a>
</li>
<li><a class="waves-effect"><span class="nav-icon"><i class="fa fa-align-justify"></i></span><span class="nav-label">Registration</span></a>
<ul>
<li><a ui-sref="register">Add New Patient</a>
</li>
<li><a href="#">Show Patients</a>
</li>
</ul>
</li>
<li><a href="#"><span class="nav-icon"><i class="fa fa-table"></i></span><span class="nav-label">Appointment</span></a>
<ul>
<li><a href="#">Fix Appointment</a>
</li>
<li><a href="#">View Appointment</a>
</li>
<li><a href="#">Day Sheet</a>
</li>
<!--<li><a href="stack-tables.html">Stack Tables</a> -->
</li>
</ul>
</li>
<li><a href="#"><span class="nav-icon"><i class="ico-hammer-wrench"></i></span><span class="nav-label">Employee Registration</span></a>
<ul>
<li><a href="#">Employee Category</a>
</li>
<li><a href="#">Add New Employee</a>
</li>
<li><a href="#">View Employees</a>
</li>
<li><a href="#">Reports</a>
<ul>
<li><a href="#">Employee Details</a>
</li>
</ul>
</li>
<!--<li><a href="#">Bootstrap Elements</a>
</li> -->
</ul>
</li>
</ul>
</div>
1 個解決方案
解決方案1
0 已采納 2016-07-18 11:02:52
您可以在ui視圖中分隔div並創建一個名為'home.html'或您喜歡的任何名稱的新html文件。
home.html：
<div class="jumbotron">
<div class="container">
<div class="col-xs-offset-2 col-xs-8">
<h3> Clinic Management System </h3>
<a ui-sref="login"> <button class="btn btn-success">Start</button></a>
</div>
</div>
身體：
<body>
<div ui-view>
</div>
然后在您的stateProvider中添加一個具有默認狀態的新狀態：
$urlRouterProvider.otherwise('/home');
$stateProvider.state('home', {
url: "/home",
templateUrl: "app/home/views/home.html",
controller: "HomeController"
})
希望這可以幫助。
防止頁面創建其他對話框，從而無法正確綁定角度js
[英]preventing page from creating additional dialogs not binding the angular js properly
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.