2017-04-27 160 views
1

這是我的第一篇文章,我希望我已經清楚了,我不能得到$ state.go的工作,我一直在尋找所有的東西,但我似乎沒有找到答案,不太清楚我做錯了什麼,因爲我對這項技術很陌生,我認爲這很好。也許我必須在app.js中聲明index.html,但是我不希望這個頁面在應用程序啓動後纔可訪問,只有在用戶登錄後纔開始,除非他們已經登錄重新啓動應用。

  1. 這是我app.js

    angular.module('starter', ['ionic','starter.controllers', 'starter.services']) 
    
    .config(function($ionicConfigProvider, $stateProvider, $urlRouterProvider) { 
    
    $stateProvider 
    
    .state('tab', { 
    url: '/tab', 
    abstract: true, 
    templateUrl: 'templates/tabs.html' 
    }) 
    
    .state('tab.appointments', { 
    url: '/appointments', 
    views: { 
        'tab-appointments': { 
        templateUrl: 'templates/tab-appointments.html', 
        controller: 'appointmentsCtrl' 
        } 
    } 
    }) 
    
    .state('tab.findPatient', { 
    url: '/findPatient', 
    views: { 
        'tab-findPatient': { 
        templateUrl: 'templates/tab-findPatient.html', 
        controller: 'FindPatientCtrl' 
        } 
    } 
    }) 
    
    .state('tab.findSlot', { 
    url: '/findSlot', 
    views: { 
        'tab-findPatient': { 
        templateUrl: 'templates/tab-findSlot.html', 
        controller: 'FindPatientCtrl' 
        } 
        } 
    }) 
    
    .state('tab.settings', { 
    url: '/settings', 
    views: { 
        'tab-settings': { 
        templateUrl: 'templates/tab-settings.html', 
        controller: 'settingsCtrl' 
        } 
    } 
    }); 
    
    $urlRouterProvider.otherwise('/tab/appointments'); 
    }); 
    
  2. 這是我的index.html

    <body ng-app="starter"> 
    <ion-header-bar class="bar-calm" align-title="center"></ion-header-bar> 
    <ion-pane> 
        <ion-content scroll="false"> 
        <form ng-controller="loginCtrl" name="loginCredentialsForm"> 
        <div class="list list-inset"> 
        <label class="item item-input"> 
         <input class="text-center" type="text" placeholder="Username" ng-model="username" required="true"> 
        </label> 
        <label class="item item-input"> 
         <input class="text-center" type="password" placeholder="Password" ng-model="password" required="true"> 
        </label> 
        <label class="item item-input"> 
         <input class="text-center" type="password" maxlength=4 placeholder="PIN" ng-model="practicePin" required="true"> 
        </label> 
        </div> 
        <div class="text-center"> 
         <button class="button button-block button-calm small_button" ng-disabled="loginCredentialsForm.$invalid" ng-click="login()" type="submit">Login</button> 
        </div> 
        </form> 
        </ion-content> 
    </ion-pane> 
    </body> 
    
  3. 這是我controllers.js

    angular.module('starter.controllers', []) 
    
    .controller('loginCtrl', function($scope, $state) { 
    
        $scope.login = function() { 
        $state.go('tab.appointments'); 
        }; 
    }) 
    

在此先感謝,我對任何語法錯誤表示歉意。

編輯 - 添加

  1. 這是tabs.html看起來像

    <ion-tabs class="tabs-icon-bottom tabs-calm"> 
        <ion-tab title="Appointments" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/appointments"> 
        <ion-nav-view name="tab-appointments"> 
        </ion-nav-view> 
        </ion-tab> 
    </ion-tabs> 
    
  2. 再有就是home.html的,我敢肯定的是,重定向到標籤中的一個。 HTML,然後由其餘的加載。

    <body ng-app="starter"> 
        <ion-nav-bar class="bar-calm" align-title="center"> 
         <ion-nav-back-button> 
         </ion-nav-back-button> 
        </ion-nav-bar> 
        <ion-nav-view></ion-nav-view> 
        </body> 
    

如果我改變home.html的到的index.html的名稱,不使用,我要爲人們登錄一切正常,實際的index.html,但我真的需要人們登錄,因此他們有自己的記錄。

This is what home.html actually looks like 正如我所說,我是這種技術的新手,試圖盡我所能瞭解這是如何工作的。真的很感謝任何幫助。

+0

你有開發人員工具控制檯錯誤? 'templates/tabs.html'中是否還有'

'? – Leguest

+0

我剛剛修改了離子給出的模板作爲示例,我應該反正嗎? –

+0

此外,'templates/tabs.html'中的'ui-view'應該具有'tab-appointmentments'的名稱屬性 – Ladmerc

回答

1

您還可以使用$window重定向到頁面。

$window.location.href = 'templates/tab-appointments.html'; 

控制器可以改變這樣

angular.module('starter.controllers', []) 

.controller('loginCtrl', function($scope, $state,$window) { 

    $scope.login = function() { 
    $window.location.href = 'templates/tab-appointments.html'; 
    }; 
}) 
+0

這實際上使得這個技巧非常好,你甚至可以在重定向到其他頁面之前驗證輸入通過JS。我非常感謝你的回答 –