Question

我正在尝试为此添加某种解决方案/承诺，以防止用户移动到某些页面，直到他们创建了个人资料，添加了朋友等。我有一个应用程序，一个控制器和一个服务。任何指导都会有所帮助！

null

控制器代码：

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'
      );
  };
});

HTML code：

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;
  };

Answer 1

您可以使用角度js中的$locationChangeStart事件来验证控制器中用户的退出事件。

  $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事件。在验证导航条件时，可以将用户重定向到另一页面。 $scope.IsUserNavigatable()指的是验证用户导航条件的方法。如果失败，请通过触发event.preventDefault()

来阻止用户导航

这里我展示了一个示例函数，用于检查用户在退出页面时是否已创建。在该函数中，它返回当时创建的用户列表长度。如果用户数组的长度大于零，则用户可以导航。

Answer 2

您可以使用$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'
    );
};

防止用户进入其他视图ui-route

2 个答案: