没有在ui视图中加载的模板。
没有在ui视图中加载的模板。
提问于 2016-07-18 07:15:02
当然，我在angularjs中工作，下面是index.php (登录后)和mainApp.js (登录后的主要应用程序)。在这里，我使用会话存储来检查当前会话是否有效。此外，登录后，父页面(即index.php呈现的页面)和导航栏都是可见的，但是模板在哪里也找不到。google开发工具显示模板已成功加载(即状态200)，可以在网络的选项卡中看到。但是，无论从导航栏中选择什么，模板都不会呈现。
index.php
<!-- main page -->
<?php
$version = time();
?>
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap and our custon css files) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.navbar {
border-radius: 0px;
}
ul {
list-style-type: none;
}
</style>
<!-- JS (load angular, ui-router and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="js/mainApp.js"></script>
</head>
<!-- NAVIGATION -->
<body>
<div ng-app="mainApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand"><strong>DASHBOARD</strong></a>
</div>
<ul class="nav navbar-nav navbar-left">
<li><a ui-sref="home">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Client
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="addClient">Add Client</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Service
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="addService">Add Service</a></li>
</ul>
</li>
<li><a ui-sref="about">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a ui-sref="logout">Logout</a></li>
</ul>
</nav>
</div>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT -->
<div ui-view></div>
</div>
</body>
</html>mainApp.js
var mainApp = angular.module('mainApp', ['ui.router']);
mainApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url:'/',
templateUrl: function (){
if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){
return 'templates/login.html';
}
else {
return 'templates/home.html';
}
}
})
.state('addClient', {
url:'/addClient',
templateUrl: function(){
if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){
return 'templates/login.html';
}
else{
return 'templates/addClient.html';
}
}
})
.state('addService', {
url:'/addService',
templateUrl: function(){
if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){
return 'templates/login.html';
}
else{
return 'templates/addService.html';
}
}
})
.state('about', {
url: '/about',
templateUrl: function (){
if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){
return 'templates/login.html';
}
else {
return 'templates/about.html';
}
}
})
.state('logout', {
url: '/login',
templateUrl: function (){
sessionStorage.clear();
return 'templates/login.html';
}
});
});请告诉我是否有更好的方法代替使用会话，并帮助我解决这个问题。谢谢，
顺便提一句，我是的新手，如果您能指导我如何高效地实现登录，无论是性能上还是安全性方面，我都很感激。
回答 2
Stack Overflow用户
发布于 2016-07-18 13:51:06
处理这种情况的一种方法是添加一个拦截器，如下所示。
mainApp.config(function ($httpProvider) {
$httpProvider.interceptors.push('loginInterceptor');
}).factory('loginInterceptor', function ($q, $window,$rootScope) {
return {
'response': function(response) {
if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){
$rootScope.$broadcast("notLoggedIn",{statusCode : 'NOT_LOGGED_IN'});
}
else{
return response;
}
},
'responseError': function(rejection) {
return $q.reject(rejection);
}
}
})然后按以下方式处理消息'notLoggedIn‘
mainApp.run(function($state,$rootScope){
$rootScope.$on("notLoggedIn",function(event,message){
$state.transitionTo('login');//Define a state with template url 'templates/login.html';
});
})这种方法的优点是，您不会最终检查每个状态定义中的登录状态。
Stack Overflow用户
发布于 2016-07-18 11:34:25
尝试使用ng视图而不是ui视图，看看这是否对我的情况有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38430630
复制相关文章
相似问题
腾讯云开发者
