如何在angularJS中交换视图？

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

1.注册/登录链接应该保持在顶部，点击它们之后应该在下面显示相应的视图。

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

我已经尝试使用下面的代码，但仍然2链接消失和登录/注册视图出现。

在登录控制器中触发http Post后，会显示menu-auth.html，但适当的css不是displayd，所以我无法单击菜单链接。

我想菜单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'); 
    } 
    } 
});

来源

2017-03-04 sham

我对做了以下更改（请注意将ui-sref值更改为包含。点）

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

来源

2017-03-04 19:50:10 sham

如何在angularJS中交换视图？

回答

相关问题