登录Ionic / AngularJs

时间:2016-03-09 14:10:59

标签: angularjs ionic-framework

我是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>

0 个答案:

没有答案