Question

我有一个带有以下菜单的Ionic sidemenu项目：

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable" align-title="center">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-content>
            <div class="list">
                <a class="item item-icon-left" menu-close href="#/app/products">
                    <i class="icon ion-home"></i>
                    <h2>Home</h2>
                </a>
                <a class="item item-icon-left" menu-close href="#/app/account">
                    <i class="icon ion-person"></i>
                    <h2>mein Konto</h2>
                </a>
                <a class="item item-icon-left" menu-close href="#/app/orders">
                    <i class="icon ion-android-list"></i>
                    <h2>meine Bestellungen</h2>
                </a>
            </div>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

此处定义的hrefs均按预期工作。

我的产品页面现在有几个子页面。

的HTML文件：

<ion-view view-title="Home">
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="product in products" href="#/app/products/{{product.templateUrl}}">
                {{product.name}}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

JS-文件：

angular.module('App.Products', ['App.Products.Prints', 'App.Products.Box', 'App.Products.Book', 'App.Products.Framed'])

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app.products', {
        url: "/products",
        views: {
            'menuContent': {
                templateUrl: "modules/products/products.html",
                controller: 'ProductsController'
            }
        }
    });
})

.controller('ProductsController', function ($scope, ProductsFactory) {
    $scope.products = [];

    init();

    function init() {
        $scope.products = ProductsFactory.getProducts();
    }
})

.factory('ProductsFactory', function() {
    var products = [
        {
            name: 'Prints',
            img: 'img/wardwarz.png',
            templateUrl: 'prints'
        },
        {
            name: 'PhotoBox',
            img: 'img/argo.png',
            templateUrl: 'box'
        },
        {
            name: 'Photobuch',
            img: 'img/django.png',
            templateUrl: 'book'
        },
        {
            name: 'Photo im Rahmen',
            img: 'img/ic_profile.png',
            templateUrl: 'framed'
        }
    ];

    var factory = {};

    factory.getProducts = function () {
        // Hier könnte ein HTTP Request rein um die Produkte vom Server zu erhalten!

        return products;
    }

    return factory;
});

并显示子页面的一个示例：

的HTML文件：

<ion-view view-title="Prints">
    <ion-content>

    </ion-content>
</ion-view>

JS-文件：

angular.module('App.Products.Prints', [])

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app.products.prints', {
        url: "/products/prints",
        views: {
            'menuContent': {
                templateUrl: "modules/products/prints/prints.html"
            }
        }
    });
});

当我现在启动应用ionic serve时，侧面菜单的导航工作正常，我可以打开我的产品页面。导航到prodcuts/prints不起作用。我没有收到错误消息或任何东西。点击该项目后没有任何事情发生。

这里有什么问题？

可在此处找到示例项目：Mega File - MyApp.rar

Answer 1

而不是仅使用href来执行导航

ui-sref="name_of_the_state"

示例：

ui-sref="app.products.prints"

这样，您在角度/离子导航时就不会出现问题。

如果您的路线中甚至有参数，例如：

$stateProvider.state('app.products.edit', {
    url: "/products/edit/:id",
    views: {
        'menuContent': {
            templateUrl: "modules/products/prints/prints.html"
        }
    }
});

你可以使用：

ui-sref="app.products.edit(1)"

此外，我还没有看到这个应用程序的抽象路线。应该是这样的：

app -> abstract
app.products
app.products.prints

我能够在我的电脑上模拟错误。当你使用嵌套状态时，你喜欢app.products.print，你需要一个像这样的中间视图：

我的电脑上的代码示例：

.state("admin", {
                url: "/admin",
                abstract: true,
                views: {
                    "body": { templateUrl: "partials/_layoutAdmin.html" }
                }
            })
            .state("admin.page", {
                url: "/page/:idEdition",
                abstract: true,
                views: {
                    "header": { templateUrl: "partials/header.html", controller: "DefaultHeaderController" },
                    "content": { templateUrl: "partials/_layoutAdminEdition.html" }
                }
            })
            .state("admin.page.create", {
                url: "/create",
                views: {
                    "content": { templateUrl: "partials/admin.page.form.html", controller: "PageFormController" }
                }
            })

模板示例

主要布局有thi

<div data-ui-view="body"></div>

_layoutAdmin有这个

<header data-ui-view="header"></header>



<div class="container-fluid">
    <div class="row">
        <div data-ui-view="content"></div>
    </div>
</div>

当代码进入管理状态时，它将加载第一部分......

THEN ...

<div data-ui-view="content" class="edition-form"></div>

然后......表格CODE

因此，在您的情况下，您有app.products.prints：

app - ＆gt;需要一个视图 - ＆gt;好吧，你明白了

app.products - ＆gt;还需要一个视图 - ＆gt;好吧，你明白了

app.products.prints - ＆gt;在app.products视图（products.html）中，您需要在其中显示此内容。

为简单起见，我建议您将其名称更改为app.productsPrint（不使用＆＃34;。＆＃34;并且您可以按照自己的方式进行操作现在没有任何影响。

对您提供的代码进行了一些更改：

<ion-view view-title="Home">
    <ion-content>
        <div ui-view="myTestContent"></div>
    </ion-content>
</ion-view>

请注意 ui-view =＆＃34; myTestContent＆＃34;

和

.state('app.products.prints', {
        url: "/prints",
        views: {
            'myTestContent': {
                templateUrl: "modules/products/prints/prints.html"
            }
        }
    });

并且有效。

因此，在您的情况下，我建议您使用productPrints而不是products.print。此嵌套用于视图场景内的那些视图。

离子和角度：路由不工作

1 个答案: