AngularJS,ui-router,嵌套状态

发布时间：2020-12-17 17:14:32 所属栏目：安全来源：网络整理

导读：我正在使用ui-router构建应用程序的大纲.我已经定义了状态并且它似乎有效,但我不禁觉得在最佳实践方面可能有更好的方法. 我的州： ’main’是一个抽象状态,带有页眉,页脚和中间内容区域. ’main.home’是默认出现的.内容文件’home.tpl.html’是一种带有sref

我正在使用ui-router构建应用程序的大纲.我已经定义了状态并且它似乎有效,但我不禁觉得在最佳实践方面可能有更好的方法.

我的州：

>’main’是一个抽象状态,带有页眉,页脚和中间内容区域.
>’main.home’是默认出现的.内容文件’home.tpl.html’是一种带有sref的启动页面,其中包含应用程序的其他区域,例如’main.wizard.step1′.
>’main.wizard’是一个表示多步信息收集向导的抽象状态.
>’main.wizard.step1′,’main.wizard.step2’是向导中的步骤

我怀疑的是我使用了具有“@”和“”值的’views’对象.这看起来合情合理,还是会做其他事情？

$urlRouterProvider.otherwise('/');

var app = {
    name: 'main',abstract: true,url: '',views: {
        'header': {
            templateUrl: 'header.tpl.html'
        },'footer': {
            templateUrl: 'footer.tpl.html'
        }
    }
};

var home = {
    name: 'main.home',url: '/',views: {
        "@": {
            templateUrl: 'home/home.tpl.html'
        }
    }
};

var wizard = {
    name: 'main.wizard',url: '/wizard',views: {
        "@": {
            templateUrl: 'wizard/wizard.tpl.html'
        }
    }
};

var step1 = {
    name: 'main.wizard.step1',url: '/step1',views: {
        "": {
            templateUrl: 'wizard/step1.tpl.html'
        }
    }
};

/** repeat similarly for step2,step3 & step 4 **/

$stateProvider.state(app);
$stateProvider.state(home);
$stateProvider.state(wizard).state(step1).state(step2).state(step3).state(step4);

解决方法

‘@’在视图模板定义中的含义将被注入根状态的ui-view,通常是你的index.html.
如果您希望向导进入主页的中间区域,您应该在index.html中添加以下内容：

<ui-view name='content'>Optional placeholder text</ui-view>

在视图的定义中你应该做类似的事情

var wizard = {
name: 'main.wizard',views: {
    "@content": {
        templateUrl: 'wizard/wizard.tpl.html'
    }
 }
};

您实际上可以在@content中删除@,因为main是向导的父级,您不必以绝对方式解析它.在任何情况下,如果您想在向导中执行步骤(当然),请不要在向导虚拟状态中放置任何视图.让您的步骤子状态具有自己的视图和目标向导@.我没有看到你的向导需要一个单独的视图包装器(也许你想要做“y步骤x”或进度条).希望能帮助到你.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!