Question

这里是回购： https://github.com/vipul-verma/LetsLearnAngular

这是实时视图： https://rawgit.com/vipul-verma/LetsLearnAngular/master/index.html

说明： 基本模板。

主页链接会加载 partials / home.html 。

关于链接会加载 partials / about.html 和 partials / about-sublevel.html。

问题：

此处 partials / about-sublevel.html 是关于网页的子级别，因此可以说它是关于网页或嵌套视图/状态的一部分页。但是如果您看到索引页面有两个视图'viewA'，'viewB'。

'viewA'根据链接加载 partials / home.html 或 partials / about.html 。

'viewB'仅在使用 partials / about-sublevel.html点击“关于”链接时加载。

问题：

有没有办法将 partials / about-sublevel.html 页面从索引页和加载到about.html 中分开，所以我不必将 <div ui-view="viewB"></div> 中的标记放在索引页中。

正确的方式 'viewB'应该加载about.html ，因为它是关于页面的一部分，当我点击关于链接 partials / about.html 和部分/关于默认情况下会显示-sublevel.html 。

正确的方法是什么，这种情况下的最佳做法。将在 app.js 中完成此操作。请仅使用上面的git repo给出答案。请不要使用repo中的代码给出虚拟答案。谢谢

Answer 1

我认为我完全不了解你的问题，但最佳做法是为每个州设置一个模板。

以下是我如何使用嵌套视图的示例：

 var root = "/app/Views/";

    $stateProvider
        .state('/', {
            url: '/',
            templateUrl: root + 'Index.html'
        })
        .state('pas', {
            url: '/pas',
            templateUrl: root + 'Index.html'
        })

        .state('pas.calculate', {
            url: '/calculate',
            templateUrl: root + 'Calculate.html'
        })
        .state('pas.calculate.form', {
            url: '/form',
            templateUrl: root + 'Calculate/Form.html'
        })
        .state('pas.calculate.overview', {
            url: '/overview',
            templateUrl: root + 'Calculate/Overview.html'
        })

        .state('pas.contact', {
            url: '/contact',
            templateUrl: root + 'Contact.html'
        })

    $stateProvider
        .state("otherwise", {
            url: "*path",
            templateUrl: root + "Index.html"
        });

Ui路由器AngularJs嵌套状态和嵌套视图正确方式

1 个答案: