我正在使用具有多个命名视图的UI路由器来开发AngularJS应用程序。我的应用程序在index.html中具有一个ui视图,并且状态配置为:
$stateProvider
.state('login', {
url : '/',
templateUrl : "partials/login.html",
controller : "login-controller"
})
.state("portal", {
url :"",
abstract : true,
templateUrl : "partials/header.html",
})
.state("portal.create-claim", {
url : "/dashboard",
views : {
'create-claim' : {
templateUrl : "partials/create-claim.html",
controller : "create-claim-controller"
}
}
})
.state("portal.history", {
url : "/history",
views : {
'history' : {
templateUrl : "partials/history.html",
controller : "history-controller"
}
}
})
/* Other child states */
我在标题中使用角度材质选项卡进行导航。每个选项卡的特定数据都插入header.html中提供的命名视图中,因此我将“ portal”状态设为抽象,将“ create-claim”和“ history”状态设为其子状态。
现在,当我进入选项卡历史记录时,URL为:http:// localhost:8082 / history并刷新浏览器,应用程序从portal.history变为portal.create-claim状态。我知道Angular应用程序是SPA,并且页面刷新引导整个应用程序,但是在刷新之前,如果url指向历史记录状态,则刷新后它应该进入历史记录状态。我尝试使用$ stateChangeStart事件进行调试。我发现应用程序确实进入了“ portal.history”状态,但随后立即重定向到抽象状态的“第一个子状态”,即“ portal.create-claim”。通过将“ portal.history”作为第一个孩子,将“ portal.create-claim”作为第二个孩子,然后进入“ portal.history”作为最终重定向状态,我确认了此问题。
我不知道这个问题。我正在尝试为我的应用处理页面刷新。谁能帮我吗?
这个过程有点棘手,但是正在起作用。我只是用自己的代码检查。
问题
事情是,只要您refresh
的页面view(html file)
包含containsmd-tabs
指令,它就会重定向到第一个选项卡(第0个索引)。现在这些标签的索引从开始0 to length-1
。因此,如果要将默认选项卡设置为3,则可以使用伪指令的md-selected
属性,md-tabs
但您要求基于URL以动态方式进行设置。
因此,首先,我们$scope
在主控制器中定义一个变量,并将其分配给md-selected
。主控制器是指与状态关联的控制器portal
,如果不存在则需要定义。
现在,如果您ui-view
为每个选项卡和不同的URL使用该名称,则每次都会调用相应的控制器。
问题因此,如果您不在默认索引页面上并刷新页面,则会将您重定向到默认索引,但是ui-route's resolve
将执行该URL。因此,您需要将适当的索引传递给该主控制器,并且我们可以使用该索引,service
因为它适用于整个应用程序。
例子
首先我们定义一个服务
var Session = function () {
this.setIndex = function(index) {
this.index = index;
};
this.getIndex = function() {
return this.index ? this.index : 0 ;
};
};
Session.$inject = [];
angular.module('tempApp').service('Session', Session);
路线文件
.state("portal", {
url :"/",
templateUrl : "partials/header.html",
controller: "TempController"
resolve: {
temp: function (Session) {
Session.setIndex("0");
}
}
})
.state("portal.create-claim", {
url : "dashboard",
views : {
'create-claim' : {
templateUrl : "partials/create-claim.html",
controller : "create-claim-controller",
resolve: {
temp: function (Session) {
Session.setIndex("1");
}
}
}
}
})
.state("portal.history", {
url : "history",
views : {
'history' : {
templateUrl : "partials/history.html",
controller : "history-controller",
resolve: {
temp: function (Session) {
Session.setIndex("2");
}
}
}
}
查看文件:
<md-tabs md-selected="tabIndex">
....
</md-tabs>
为此的TempController
var TempController = function (Session) {
this.tabIndex = Session.getIndex();
};
TempController.$inject = ['Session'];
angular.module('tempApp').controller('TempController', TempController);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句