Question

我正在尝试创建一个角度应用程序。加载index.html页面时，将显示2个链接登录和注册。单击登录或注册时，整个视图将被相应的视图替换。

1。注册/登录链接应保留在顶部，点击后应显示相应的视图。

2. 在登录控制器中成功验证后，包含登录和注册链接的完整视图应替换为menu-auth.html视图。

我尝试使用以下代码，但仍然会消失2个链接并显示登录/注册视图。

此外，在登录控制器中触发http Post后，会显示menu-auth.html，但不会显示相应的css，因此我无法单击菜单链接。

我想menu-auth.html视图不会放在index.html的视图中

的index.html

<!doctype html>
<html>

   <head>
     <script src = "js/angular.min.js"></script> 
      <script src = "js/angular-ui-router.min.js"></script>
      <script src = "app/app.js"></script>
      <script src = "controller/login.js"></script>
      <script src = "controller/register.js"></script>
      <script src = "app/config.js"></script> 

      <style>.active { color: red; font-weight: bold; }</style>
   </head>
   <body>
      <div ng-app="app">

      <ui-view>

      </ui-view>

      </div>
      </div>
      </body>

</html>

我有两个观点 菜单-unauth.html

<a ui-sref="login" ui-sref-active="active">Login</a>
<a ui-sref="register" ui-sref-active="active">Register</a>
<ui-view="unauth"></ui-view>

菜单-auth.html

 <a ui-sref=".nentry" ui-sref-active="active">Create Entry</a></br>
<a ui-sref=".ventry" ui-sref-active="active">View entry</a></br>  
<a ui-sref=".logout" ui-sref-active="active">Logout</a></br>

<ui-view="auth"></ui-view>

config.js

app.config(['$stateProvider', function($stateProvider) {

   $stateProvider
  .state('unauth', {  
        url:'',
        templateUrl: 'view/menu-unauth.html'   
  }) 

   .state('unauth.login', {  
        url:'/login',
        templateUrl: 'view/login.html',
        controller: 'login'     
  })

  .state('unauth.register', {  
        url:'/register',
        templateUrl: 'view/register.html',
        controller:'register'       
  }) 

  .state('auth', {  
        url:'/menu',
        templateUrl: 'view/menu-auth.html'   
  }) 

}]);

app.js

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

login.js（控制器）

app.controller('login', function($scope,$http,$cookieStore,$state){

   $scope.login=function(){ 

   $scope.credentials={
UserName:$scope.email,
Password:$scope.password
};

   $http({
    method: 'POST',
    url: 'test.com/sess',
    data: $scope.credentials
}).then(function(response) { 
            $state.go('auth');
    } 
   }
});

Answer 1

我对进行了以下更改（观察ui-sref值已更改为包含.dot）

菜单-unauth.html

<a ui-sref=".login" ui-sref-active="active">Login</a> <a ui-sref=".register" ui-sref-active="active">Register</a> <ui-view></ui-view>

<强> config.js

app.config(['$stateProvider', function($stateProvider) { $stateProvider .state('unauth', { url:'', templateUrl: 'view/menu-unauth.html' }) .state('unauth.login', { url:'/login', templateUrl: 'view/login.html' }) .state('unauth.register', { url:'/register', templateUrl: 'view/register.html' }) }]);

如何在angularJS中交换视图？

1 个答案: