保持用戶不會去其他視圖ui-route

Question

我想添加某種解決方案/承諾，以防止用戶移動到某些頁面，直到他們創建了一個配置文件，添加了一個朋友等。有一個應用程序，一個控制器和一個服務。任何指導都會有所幫助！

var app = angular.module('socialInternApp', ['ui.router']); 
 

 
app.config(function($urlRouterProvider, $stateProvider) { 
 

 
     $urlRouterProvider.otherwise('/'); 
 
     $stateProvider 
 

 
//#1 Initial Page 
 
     .state('home', { 
 
      url: '/', 
 
      templateUrl: 'views/templates/home.html' 
 
     }) 
 

 
//#2 Landing Page(new users' profile page) - User is taken here when they submit the initial form on the Home page. 
 
     .state('landing', { 
 
      url: '/landing', 
 
      templateUrl: '/views/templates/landing.html' 
 
     }) 
 
//#3 Search for Friends - User can access this page only after they submit the initial form on the Home Page. 
 
     .state('friend-search', { 
 
      url: '/friend-search', 
 
      templateUrl: '/views/templates/friend-search.html', 
 
      controller: 'friendSearchCtrl' 
 
     }) 
 
//#4 Upadte Profile Information - User can access this as soon as they submit the initial form on the Home page. 
 
     .state('update', { 
 
      url: '/update', 
 
      templateUrl: 'views/templates/update.html', 
 
     }) 
 
//#5 Other users' profile page. User is taken here after clicking button on image overlay on the friend-search page. 
 
     .state('friend-profile', { 
 
      url: '/friend-profile/:id', 
 
      templateUrl: 'views/templates/friend-profile.html', 
 
      controller: 'friendProfileCtrl' 
 
     }) 
 
//#6 New users' friends list. Only can access after they have added a friend. 
 
     .state('friends', { 
 
      url: '/friends', 
 
      templateUrl: '/views/templates/friends.html' 
 
     }); 
 
    });

控制器代碼：

app.controller('mainCtrl', function($scope, $state, mainSvrc){ 
 

 
    $scope.$state = $state; 
 
    $scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
 
    // Check whether user input form is submitted 
 
    if(!formSubmitted){ 
 
    event.preventDefault(); 
 
    } 
 
    }); 
 
//Local storage for new user profile and updated profile.// 
 
    $scope.currentUser = JSON.parse(localStorage.getItem('profile')); 
 

 
    var formSubmitted = false; 
 
    $scope.createUser = function(obj, $event) { 
 
    $scope.currentUser = mainSvrc.createUser(obj); 
 
    formSubmitted = true; 
 
    $state.go('landing'); 
 
    swal(
 
     '', 
 
     'Your Information has been saved!', 
 
     'success' 
 
    ); 
 
    }; 
 
});

服務代碼：

app.service('mainSvrc', function() { 
 

 
//Stores users' data in local storage after clicking the save button on either form. 
 
    this.createUser = function(user) { 
 
    localStorage.setItem('profile', JSON.stringify(user)); 
 
    return user; 
 
    };

HTML代碼：

<form class="form-home"> 
 
       <input type="text" 
 
       ng-model="newUser.name" 
 
       placeholder="Full Name" 
 
       onfocus="this.placeholder = ''" 
 
       onblur="this.placeholder = 'Full Name'" /> 
 

 
       <input type="text" 
 
       ng-model="newUser.tagline" 
 
       placeholder="Tagline" 
 
       onfocus="this.placeholder = ''" 
 
       onblur="this.placeholder = 'Tagline'"> 
 

 
       <input type="text" 
 
       ng-model="newUser.profileUrl" 
 
       placeholder="Profile Image Url" 
 
       onfocus="this.placeholder = ''" 
 
       onblur="this.placeholder = 'Profile Image Url'"> 
 

 
       <textarea rows="15" cols="50" 
 
       ng-model="newUser.bio" 
 
       placeholder="Bio" 
 
       onfocus="this.placeholder = ''" 
 
       onblur="this.placeholder = 'Bio'"> 
 
       </textarea> 
 

 
       <button type="submit" ng-click="createUser(newUser, event)" 
 
       > 
 
        Save Changes 
 
       </button> 
 
      </form>

Answer 1

您可以使用$stateChangeStart事件來檢查表單是否已提交。

$stateChangeStart每當您嘗試導航到其他頁面時觸發事件，在您的情況下爲$state.go('landing')。

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
    // Check whether user input form is submitted 
    if(!formSubmitted){ 
    event.preventDefault(); 
    } 
}); 

我相信，單擊表單提交按鈕時應該有一個ng-click事件。 於是，在與function相關聯的那個點擊事件集formSubmitted變量爲true。

例如：

var formSubmitted = false; 
$scope.createUser = function(profileObj, $event) { 
    // I don't think you need to preventDefault here, but not sure what you are trying to do. 
    // If you just wrote the $event.preventDefault() so that user will not be navigated to landing page, you don't need it here. 
    //$event.preventDefault(); 
    $scope.userProfile = profileObj; 
    userProfService.createUser(profileObj); 
    formSubmitted = true; 
    $state.go('landing'); 
    swal(
     'Welcome to the Club!', 
     'Your Information has been saved!', 
     'success' 
    ); 
}; 

Answer 2

則可以使用$locationChangeStart事件在角JS來自控制器驗證用戶的退出事件。

$scope.IsUserNavigatable = function(){ 
    var createdUsers = $scope.UserList; 
    var isUserCreated = createdUsers.length > 0; 
    return isUserCreated; 
    } 

    $scope.$on('$locationChangeStart', function (event, newUrl, oldUrl) { 

     if ($scope.IsUserNavigatable()) { 
      //Here the user can move to next page 
     } 
     else { 
      event.preventDefault(); 
     } 
    }); 

$locationChangeStart事件將在用戶嘗試更改URL時觸發。驗證導航條件後，用戶可以重定向到另一個頁面。 $scope.IsUserNavigatable()指的是驗證用戶導航條件的方法。如果失敗，請通過觸發來阻止用戶導航event.preventDefault()

這裏我展示了一個示例函數，用於在從頁面退出時檢查用戶是否已創建。在該函數中，它返回當時創建的用戶列表的長度。如果用戶數組的長度大於零，用戶可以導航。