我是Angular和Ionic的新手。我试图根据登录状态隐藏侧边菜单中的一些离子项,但它不起作用。你知道为什么吗?
这是app.js文件 - 它基本上是离子侧菜单模板中的默认app.js文件。
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.tabs.position('top');
$stateProvider.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
});
$stateProvider.state('app.dashboard', {
url: '/dashboard',
views: {
'menuContent': {
templateUrl: 'templates/dashboard.html',
controller: 'AppCtrl'
}
}
});
$stateProvider.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: './templates/login.html',
controller: 'AppCtrl'
}
}
});
$stateProvider.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/login');
});
这是控制器文件 - 提交登录表单后 它通过验证它将调用loginSuccess()函数 将“isLogged”变量设置为true。现在是侧面菜单元素 应该出现具有ng-show属性但不会出现的属性。如果我 在loginSuccess函数中插入一个console.log,它会显示出来 变量的值为true但仍不起作用。
(function() {
'use strict';
var app = angular.module('starter.controllers', []);
app.controller('AppCtrl', function ($scope, $ionicModal, $timeout, $state) {
$scope.bothErrors = false;
$scope.emailError = false;
$scope.isLogged = false;
$scope.loginData = {};
$scope.doLogin = function () {
if($scope.validateEmail($scope.loginData.username)) {
if($scope.loginData.username == 'george@wgeorge.ro' && $scope.loginData.password == '1234') {
$scope.loginSuccess();
}else{
$scope.bothErrors = true;
$scope.emailError = false;
}
}else{
$scope.emailError = true;
}
};
$scope.loginSuccess = function () {
$state.go('app.dashboard');
$scope.bothErrors = false;
$scope.isLogged = !$scope.isLogged;
};
$scope.logOut = function(){
$scope.isLogged = !$scope.isLogged;
$state.go('app.login');
};
$scope.validateEmail = function (email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
};
});
}());
这是sidemenu html文件
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-title>
<img src="img/logo.png" class="logo">
</ion-nav-title>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/dashboard">
Acasa
</ion-item>
<ion-item ng-show="showProfile" menu-close href="#/app/playlists">
item1
</ion-item>
<ion-item menu-close href="#/app/playlists">
item2
</ion-item>
<ion-item menu-close href="#/app/playlists">
item3
</ion-item>
<ion-item ng-show="isLogged" menu-close href="#/app/playlists">
item4
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>