我有一个标准的角度页面,不与任何 ui.router 功能(index.html)关联。在该页面中,我单击一个触发 Angular 调用的链接,然后经过一些操作后,需要将流程重定向到使用 angular-ui.route 模板的文件夹内的页面。
我创建了一个 Plunker 来代表这一点: http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview(当前 Plunker 正在工作,但第一页上有一个循环试图调用使用 $urlRouterProvider.otherwise('events'); 创建的默认状态)
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="[email protected]" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="LoginController as lgCtrl">
<h1>This page does not use ui.router</h1>
<a href="manage/home.html" ng-click="goToEvents()">Login</a>
</body>
</html>
带有 ui-view 标签的页面位于管理文件夹内: 管理/home.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16" data-require="[email protected]"></script>
<script data-require="ui-router@*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script type="text/javascript" src="../app.js"></script>
</head>
<body ng-controller="EventsController as evtCtlr">
<h1>Hello manage/home.html</h1>
<div ui-view></div>
</body>
</html>
要插入的templateUrl页面为: 管理/events.html
<div ng-controller="EventsController as evtCtrl">
<h3>Events Page</h3>
<div>Some user email</div>
</div>
app.js
'use strict';
(function () {
var app = angular.module('app', ['ui.router']);
/**
* Configuration for ui-router module. Handles navigation based on app states.
*/
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('events');
$stateProvider
.state('events', {
url: '/events',
views:{
'@manage/home':{
templateUrl: 'manage/events.html'
}
}
});
});
app.controller('LoginController', ['$scope','$window', '$state',
function($scope, $window, $state){
$scope.goToEvents = function(){
console.log('trying to load events');
//this call doesn't work, 404 - It should?? -->> see reference
//https://github.com/angular-ui/ui-router/wiki/URL-Routing
$window.location.href = 'manage/home.html/events';
//don't work
//$state.transitionTo('events');
//also don't work
//$state.go('events');
};
}]);
app.controller('EventsController', [function(){
console.log('EventsController');
}]);
})();
我创建了一个代表这一点的 plunker: http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview
我尝试了从第一个非 ui.router 页面移动的不同方法,但到目前为止没有任何效果。
最好的方法是什么?
首先,不要将
$state
作为依赖项注入 LoginController
中,因为与此控制器相关的视图不是 UI 路由。添加 $state
依赖项会导致您在示例中看到的循环,即 UI-Router 然后将此视图视为路由。由于没有状态与此路由匹配,它会尝试加载默认状态,该状态的模板具有相对 URL,然后在 Plunkr 的错误目录中查找它,这会导致 404 错误。
其次,要通过 location.href 重定向的 URL 应该有一个哈希值,否则也会给出 404
代码
LoginController
app.controller('LoginController', ['$scope', '$window',
function($scope, $window) {
$scope.goToEvents = function() {
//Do Something
$window.location.href = 'manage/home.html#/events';
};
}
]);