sim*_*ser 8 javascript angularjs angular-ui-router
我正在使用Angular UI路由器.请在下面找到代码.
的index.html
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="../../Scripts/AngularControllers/LoginHomeControllers/RouteMainController.js"></script>
<script src="../../Scripts/AngularControllers/LoginHomeControllers/LoginController.js"></script>
</head>
<body>
<div ui-view="mainview"></div>
</body>
</html>
RouteMainController.js
var app = angular.module("appHome", ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('introduction', {
url: '/',
views: {
'mainview':
{
templateUrl: 'Login.html',
controller: 'ctrlLogin'
}
}
})
.state('login', {
url: '/login',
views: {
'mainview':
{
templateUrl: 'Login.html',
controller: 'ctrlLogin'
}
}
})
.state('home', {
url: '/home',
views: {
'mainview':
{
templateUrl: 'Home.html',
}
}
})
.state('home.requestsummary', {
url: '/requestsummary',
views: {
'homedetailview':
{
templateUrl: 'Test1.html',
}
}
})
.state('home.requestsummary.requestdetail', {
url: '/requestdetail',
views: {
'homedetailview':
{
template: "'<h3>Foo</h3>'"
}
}
})
});
的login.html
<div>
<button id="btnAdd" type="submit" ng-click="Login()">Login</button>
</div>
LoginController.js
var myApp = angular.module('appHome');
myApp.controller("ctrlLogin", ['$scope', '$location', function ($scope, $location) {
$scope.Login = function () {
window.location.href = '#!home/requestsummary';
}
}]);
Home.html中
<!--Sample Code for displaying Menu Tab and corresponding link-->
<li>
<a href="#">Employees <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu">
<li><a ui-sref=".employeeadd">Add Employee Record</a></li>
</ul>
</li>
<div ui-view="homedetailview"></div>
Test1.html
<a ui-sref=".requestdetail">Hello World</a>
我能够成功登录并获得带有"Hello World"链接的菜单选项卡.我想始终显示菜单选项卡并动态更改以下文本.
我的问题是,每当我点击"Hello World"链接时,我都希望Foo出现在"Hello World"链接的位置,但它不起作用.即使它正在改变状态(url),但它没有加载实际视图.
请帮帮我.
您的代码存在结构性问题.状态requestdetail是子状态home.requestsummary,因此,它需要ui-view在home.requestsummary状态模板中,它可以绑定HTML.
根据你的代码,也没有ui-view在Test1.html.因此,为了确保没有其他问题,您可以尝试添加ui-viewin Test1.html,并更改状态配置,如下所示:
<!-- Test.html -->
<a ui-sref=".requestdetail">Hello World</a>
<div ui-view></div>
// RouteMainController.js
...
.state('home.requestsummary.requestdetail', {
url: '/requestdetail',
template: "'<h3>Foo</h3>'
})
在此更改之后,只需检查标题Foo是否出现在视图中.如果它出现,那么你的代码一切都很好.现在,第二部分是将标题Foo加载到显示Hello world链接的同一位置.
要做到这一点,您需要更改视图目标,因为homedetailview存在于Home.html,即父状态home.requestsummary.因此,您需要更改状态配置,home.requestsummary.requestdetail如下所示:
// RouteMainController.js
...
.state('home.requestsummary.requestdetail', {
url: '/requestdetail',
views: {
'homedetailview@home': {
template: "'<h3>Foo</h3>'
}
}
})
这将完全针对homedetailview状态home,您的模板home.requestsummary.requestdetail将显示在那里.
| 归档时间： |
|
| 查看次数： |
183 次 |
| 最近记录： |