【问题标题】:angularjs $state.go not redirectingangularjs $state.go 不重定向
【发布时间】:2015-09-18 12:40:34
【问题描述】:

我现在真的很沮丧。我现在尝试更改 ionic 应用中的状态超过 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'
                }
            }
        })

当我在浏览器中手动打开 url 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");

这也不行

我不明白为什么仅仅改变一个简单的视图就必须如此复杂!

我不希望细节视图中有任何子视图。我只想打开步骤视图。

好的,澄清一下,我需要将步骤视图加载到选项卡问题视图中,这是我的选项卡控件的内容,这在子视图中不起作用。

我对这个问题做了一个小问题:http://plnkr.co/edit/YK7Fp3vUhEPGZeYtOF9Y?p=info 奇怪的是在第二次单击时,一切都在 plunker 上工作。但代码与我的应用程序中的代码完全相同。

【问题讨论】:

    标签: angularjs ionic-framework angular-ui-router ionic


    【解决方案1】:

    我在那个 plunker 中注意到您仍在引用旧版本的框架:

    <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:我在视图issue-steps.html 中删除了hide-nav-bar="true" 指令,只是为了确保导航正常工作。即使您将其添加回来,它仍然有效。

    PPS:您可能已经注意到,应用程序的外观与框架的新版本 1.1.0 存在一些差异。
    自测试版以来,一些事情发生了变化。

    【讨论】:

    • 你是我的英雄!!!!非常感谢。我从另一个文件中复制了 issue-details.html 的内容,但从未见过那里有 ui-sref。你完全拯救了我的一天。我把头发从问题中拉出来,视图发生了变化并立即变回。非常感谢!
    • 很高兴我帮助了弗洛里安。有时您需要保持超然状态才能发现错误。当我们发现一个意想不到的行为时,我们往往会开始四处走动,评论和取消评论,在某些时候,我们会失去对整个事物的控制。干杯。
    【解决方案2】:
     .state("newUtilities", {
                url: "/newUtilities",
                templateUrl: "app/admin/modules/newUtility/view/newUtilities.html",
                controller: "NewUtilitiesController",
                resolve: load(['myProject.newUtilities'])
            })
    

    【讨论】:

    • 您好,谢谢。不幸的是,我需要将视图加载到“选项卡问题”视图中,这是我的选项卡控件的内容,这不起作用。
    猜你喜欢
    • 1970-01-01
    • 2014-12-31
    • 1970-01-01
    • 2018-10-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-07-17
    相关资源
    最近更新 更多