页面无法正确呈现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.