如何在 angularJS 中交换视图？
Posted
技术标签:
【中文标题】如何在 angularJS 中交换视图？【英文标题】：How to swap views in angularJS? 【发布时间】：2017-07-24 19:01:38 【问题描述】：我正在尝试创建一个角度应用程序。 加载 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>
我有两种观点 menu-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>
menu-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');
);
【问题讨论】：
【参考方案1】：我对做了如下改动（观察ui-sref值改为包含.dot）
menu-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 中交换视图？的主要内容，如果未能解决你的问题，请参考以下文章
angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法呢?
如何在 angularjs 应用程序的部分视图中包含 css 或 javascript 文件...？ [关闭]
Laravel 5.1/AngularJS：在 Angular 视图中重置密码（如何验证 CSRF 令牌？）