离子侧菜单：刷新根页面

我有使用Ionic的侧菜单模板的问题。我有一个这样的菜单：离子侧菜单：刷新根页面

其中“登录/注销”匹配页面login.html，如根页面。你可以看看这个在离子文件名为app.component.ts：

import { Component, ViewChild } from '@angular/core'; 
 
import { Nav, Platform } from 'ionic-angular'; 
 
import { StatusBar, Splashscreen } from 'ionic-native'; 
 

 
import { Login } from '../pages/login/login'; 
 
import { Page2 } from '../pages/page2/page2'; 
 
import { Page3 } from '../pages/page3/page3'; 
 

 

 
@Component({ 
 
    templateUrl: 'app.html' 
 
}) 
 
export class MyApp { 
 
    @ViewChild(Nav) nav: Nav; 
 

 
    rootPage: any = Login; 
 

 
    pages: Array<{title: string, component: any}>; 
 

 
    constructor(public platform: Platform) { 
 
    this.initializeApp(); 
 

 
    // used for an example of ngFor and navigation 
 
    this.pages = [ 
 
     { title: 'Login/Logout', component: Login }, 
 
     { title: 'Page Two', component: Page2 }, 
 
     { title: 'Page Three', component: Page3 } 
 
    ]; 
 

 
    } 
 

 
    initializeApp() { 
 
    this.platform.ready().then(() => { 
 
     // Okay, so the platform is ready and our plugins are available. 
 
     // Here you can do any higher level native things you might need. 
 
     StatusBar.styleDefault(); 
 
     Splashscreen.hide(); 
 
    }); 
 
    } 
 

 
    openPage(page) { 
 
    // Reset the content nav to have just this page 
 
    // we wouldn't want the back button to show in this scenario 
 
    this.nav.setRoot(page.component); 
 
    } 
 
}

和app.module.ts：

import { NgModule, ErrorHandler } from '@angular/core'; 
 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
 
import { MyApp } from './app.component'; 
 
import { Login } from '../pages/login/login'; 
 
import { Page2 } from '../pages/page2/page2'; 
 
import { Page3 } from '../pages/page3/page3'; 
 

 
@NgModule({ 
 
    declarations: [ 
 
    MyApp, 
 
    Login, 
 
    Page2, 
 
    Page3 
 
    ], 
 
    imports: [ 
 
    IonicModule.forRoot(MyApp) 
 
    ], 
 
    bootstrap: [IonicApp], 
 
    entryComponents: [ 
 
    MyApp, 
 
    Login, 
 
    Page2, 
 
    Page3 
 
    ], 
 
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] 
 
}) 
 
export class AppModule {}

这是代码login.html：

<ion-header> 
 
    <ion-navbar> 
 
    <button ion-button menuToggle> 
 
     <ion-icon name="menu"></ion-icon> 
 
    </button> 
 
    <ion-title>Login</ion-title> 
 
    </ion-navbar> 
 
</ion-header> 
 

 
<ion-content padding> 
 
    <h3>Effettua l'accesso</h3> 
 

 
    <p> 
 
    Esegui il login oppure procedi come utente non registrato. Clicca in alto a sinistra per vedere il menu. 
 
    </p> 
 
    <form ng-show="credentials" ng-submit="submitCredentials()"> 
 
    <div> 
 
     <div> 
 
      <div>Email</div> 
 
      <div> 
 
      <input type="text" id="email" ng-model="userLoginForm.email" /> 
 
      </div> 
 
     </div> 
 
     <div> 
 
     <div>Password</div> 
 
     <div> 
 
     <input type="password" id="password" ng-model="userLoginForm.pass" /> 
 
     </div> 
 
    </div> 
 
    <div> 
 
     <div colspan="2" class='centered'> 
 
     <button ion-button type="submit">Login</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form> 
 
<form ng-show="logout" ng-submit="userLogout()"> 
 
    <div> 
 
     <div colspan="2" class='centered'> 
 
     <button ion-button type="submit">Logout</button> 
 
     </div> 
 
    </div> 
 
</form> 
 
    
 
     
 
</ion-content>

这是logincontroller.js：

'use strict'; //questo mi da informazione sull'errore 
 

 
var app = angular.module("UserManagement", ['ngRoute']); 
 

 
app.controller("LoginController", function($scope, $http, $window, restService) { 
 
    
 
    $scope.credentials = false; 
 
    $scope.logout = false; 
 
    
 
    var token = localStorage.getItem("token"); 
 
    if (token !== null){ 
 
    // $window.location.href="login.html"; 
 
     $scope.credentials = false; 
 
     $scope.logout = true; 
 
     console.log("loggato"); 
 
    } 
 
    else{ 
 
     // $window.location.href="page2.html"; 
 
     $scope.credentials = true; 
 
     $scope.logout = false; 
 
     console.log("non loggato"); 
 
    } 
 
    $scope.userlogins = []; 
 
    $scope.userLoginForm = { 
 
     email: "", 
 
     pass: "" 
 
    }; 
 
    $scope.tokenUserForm = { 
 
     idtokenuser: -1,  
 
     tokenuser: "" 
 
    }; 
 
    $scope.userForm = { 
 
     iduser : -1,  
 
     name: "", 
 
     surname: "", 
 
     birthDate: "", 
 
     cityResidence: "", 
 
     provinceResidence: "", 
 
     postalCode: "", 
 
     gender: true, 
 
     userLogin: { 
 
      iduserLogin: -1, 
 
      email: "", 
 
      pass: "" 
 
      } 
 
    }; 
 
    
 
    
 
    
 
    //8njae3j4b54fpoapftc8aofbfs 
 
    
 
    //admin: l5qsngh3v9a5f2v9p55ar4h083 
 
    $scope.submitCredentials= function() { 
 
     console.log("LOGINFORM: "+$scope.userLoginForm.pass); 
 
     restService.login($scope.userLoginForm, _logsuccess, _logerror); 
 
     
 
    $scope.userLogout= function() { 
 
     restService.logout; 
 
    } 
 
    
 
    function _logsuccess(response) { 
 
     console.log("Loggato correttamente"); 
 
     console.log(response.status); 
 
     var CurrentToken = response.data; 
 
     // _SetToken(CurrentToken);           
 
    } 
 
      
 
    function _logerror(response) { 
 
     console.log("Login fallito"); 
 
     console.log(response.status); 
 
     // _SetToken(null);          
 
    } 
 
     
 

 

 
    }; 
 

 
app.config(['$routeProvider', function($routeProvider) { 
 
      $routeProvider. 
 
      
 
      when('/sessionExpired', { 
 
       templateUrl: 'sessionExpired.htm', 
 
       controller: 'SessionExpired' 
 
      }); 
 
      
 

 
     }]); 
 

 
app.controller('SessionExpired', function($scope) { 
 
     console.log("ciao"); 
 
      $scope.message = "You must be logged"; 
 
     }); 
 
    });

在logincontroller.js我设置$scope.credentials = false; $scope.logout = false;隐藏两种形式（NG-显示），您可以在login.html上看到。之后，如果localStorage中有令牌，则login-controller.js会读取。如果是假的，用户它不登录，并认为必须是：

只有第一种形式是可见的

var token = localStorage.getItem("token"); 
 
    if (token !== null){ 
 
    // $window.location.href="login.html"; 
 
     $scope.credentials = false; 
 
     $scope.logout = true; 
 
     console.log("loggato"); 
 
    }

otherways，认为必须是：

它工作正常。但是，如果我在菜单中点击“登录/注销”，视图变为：仿佛login.html的不通过日志文件control.js访问吧！但是，如果我重新加载页面，它会正常工作，直到我再次单击菜单。为什么？我如何解决它？

很奇怪，因为最初它的工作原理，并登录后，这是我的看法：但点击“登录/退出”菜单上的观点成为这一个：

我的登录-service.js进口index.html中：

<!DOCTYPE html> 
 
<html lang="en" dir="ltr"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Ionic App</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
 
    <meta name="format-detection" content="telephone=no"> 
 
    <meta name="msapplication-tap-highlight" content="no"> 
 

 
    <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> 
 
    <link rel="manifest" href="manifest.json"> 
 
    <meta name="theme-color" content="#4e8ef7"> 
 
    
 
    <!-- cordova.js required for cordova apps --> 
 
    <script src="cordova.js"></script> 
 

 
    <!-- un-comment this code to enable service worker 
 
    <script> 
 
    if ('serviceWorker' in navigator) { 
 
     navigator.serviceWorker.register('service-worker.js') 
 
     .then(() => console.log('service worker installed')) 
 
     .catch(err => console.log('Error', err)); 
 
    } 
 
    </script>--> 
 

 
    <link href="build/main.css" rel="stylesheet"> 
 

 
</head> 
 
<body ng-app="UserManagement" ng-controller="LoginController" ng-fa> 
 

 
    <!-- Ionic's root component and where the app will load --> 
 
    <ion-app></ion-app> 
 

 
    <!-- The polyfills js is generated during the build process --> 
 
    <script src="build/polyfills.js"></script> 
 

 
    <!-- The bundle js is generated during the build process --> 
 
    <script src="build/main.js"></script> 
 

 
</body> 
 
    
 
    
 
<script src="angularjs/angular.js"></script> 
 
    <!-- 
 
<script src="angularjs/rest-services.js"></script> 
 
<script src="angularjs/login-controller.js"></script> 
 
    --> 
 

 
     
 

 
<!-- <script src = "anguarjs/angular-route.min.js"></script> --> 
 
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script> 
 
    
 
<!-- Rest services --> 
 
<script src="myjs/main-admin.js"></script> 
 
<script src="myjs/login-controller.js"></script> 
 
<script src="myjs/rest-services.js"></script> 
 

 
    
 

 
    
 
</html>

来源

2017-03-10 Alfonso Silvestri

控制台日志中显示了什么？控制台日志中显示“loggato”和“non loggato”吗？看看你的例子，$ scope.credentials和$ scope.logout永远不应该是同一时间，但这两个表单都显示出来，就好像它们一样。 –

@SteveKennedy我更新我的问题与其他图像..这很奇怪，它就像从菜单中的“登录/注销”没有读取.js文件，控制台上没有任何东西出现 –

不知道这也可以，但你有考虑加入： $ scope。$ on（'$ viewContentLoaded'，function（）{ //重设你的$ scope按钮/布尔值在这里 }）; –

这是是因为我使用了Angular v1和Ionic v2，但是Ionic v2允许Angular v2具有不同的Angular v1表示法。使用Ionic v1它可以工作

来源

2017-03-11 08:27:33

离子侧菜单：刷新根页面

回答

相关问题