我现在真的很沮丧。我尝试在离子应用程序中更改状态超过5小时。
这就是我所拥有的。
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.issues', {
url: '/issues',
views: {
'tab-issues': {
templateUrl: 'templates/tab-issues.html',
controller: 'IssuesController'
}
}
})
.state('tab.issue-detail', {
url: '/issues/:vertragsNr',
views: {
'tab-issues': {
templateUrl: 'templates/issue-details.html',
controller: 'IssueDetailsController'
}
}
})
.state('tab.issue-steps', {
url: '/issues/:vertragsNr/steps',
views: {
'tab-issues': {
templateUrl: 'templates/issue-steps.html',
controller: 'IssueStepsController'
}
}
})
当我在浏览器中手动打开网址http://localhost:8100/#/tab/issues/1/steps时,一切都很好,控制器被加载,一切都按预期工作。
但是当我做的时候
$scope.goto = function(){
$state.go('tab.issue-steps','{vertragsNr:1}')
}
在IssueDetailsController中的我看到一个转换,并且IssueStepsController被加载但是视图没有改变。
我也尝试过做
ui-sref="tab.issue-steps({ vertragsNr: r.vertragsNr})"
但是当我点击按钮时没有发生任何事情。我在页面的源代码中看到了一个href ="#/ tab / issues / 1 / steps"在元素上创建,但它不会改变视图。
我也试过
.state('tab.issue-steps', {
url: '/steps',
views: {
'tab-issues': {
templateUrl: 'templates/issue-steps.html',
controller: 'IssueStepsController'
}
}
})
但它仍然没有重定向。
我也尝试过:
$location.url("tab/issues/1/steps");
也不起作用
我不明白为什么它必须如此复杂才能改变一个简单的视图!
我不希望细节视图中有任何子视图。我只是想打开步骤视图。
好的,为了澄清,我需要将步骤视图加载到tabs-issues视图中,这是我的制表符控件的内容,而这在子视图中不起作用。
我找到了一个问题:http://plnkr.co/edit/YK7Fp3vUhEPGZeYtOF9Y?p=info 奇怪的是,第二次点击所有关于plunker的工作。但代码与我的应用程序中的代码完全相同。
答案 0 :(得分:1)
我已经注意到那个玩家仍在引用旧版本的框架:
<script src="http://code.ionicframework.com/1.0.0-beta.5/js/ionic.bundle.min.js"></script>
我会将其更改为最新的稳定版本:
<link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
然后你必须修复视图issue-details.html
。你在html视图中有这样的东西:
<div class="list card" ui-sref="tab.issue-detail({ vertragsNr: r.vertragsNr})">
....
</div>
你真的不需要
ui-sref="tab.issue-detail({ vertragsNr: r.vertragsNr})"
因为它在重定向时基本上推回了页面。
只需删除它,以便您的视图如下所示:
<ion-view view-title="Ausgaben">
<ion-content class="padding">
<div class="list card">
<div class="item item-divider">{{r.title}}</div>
<div class="item item-body">
<div>
<div><b>Vertragsbeginn:</b> {{r.rentalBegin}}</div>
<div><b>Objekt:</b> {{r.objekt}}</div>
<div><b>Abholer:</b> {{r.abholer}}</div>
<div class="list">
<button class="item item-icon-left" ng-click="goto()" ng-repeat="m in r.machines" ng-disabled="m.abgabeDatum!==null">
<i class="icon balanced" ng-class="{'ion-checkmark': m.abgabeDatum!==null}"></i>
{{m.title}}
</button>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
并且一切都应该像expected一样工作。
PS:我已在视图hide-nav-bar="true"
中删除了issue-steps.html
指令,只是为了确保导航正常运行。即使你把它添加回去,它仍然可以工作。
PPS:您可能已经注意到,应用在框架的新版本1.1.0
中的显示方式存在一些差异。
自测试版以来,一些事情发生了变化。
答案 1 :(得分:0)
.state("newUtilities", {
url: "/newUtilities",
templateUrl: "app/admin/modules/newUtility/view/newUtilities.html",
controller: "NewUtilitiesController",
resolve: load(['myProject.newUtilities'])
})