javascript - angularjs的二级路由的js会互相影响，这是为啥？

问题描述

问 题

如下图所示，总览和客服两个页面共用这个head部分，两个页面由两个控制器控制，而这两个页面都要实现图右的导出数据功能，我在做测试过程中发现，当停留在总览页面的时候，导出数据是总览的页面。当我页面停留在客服页面的时候，点击导出数据功能发现，导出的还是总览页面的，第二次点击才是客服页面的。经控制台打印，总览页面和客服页面的标识（其实就是console.log(123),仅用作测试而已）都会出现，若在客服页面刷新，打印的只有客服页面的标识。但是这个两个页面都是写在不同的控制器里面呀，客服页面怎么能获取到总览页面的标识啦？如果多次在总览页面和客服页面点击，再导出数据的时候会出现同个数据表多次导出的情况。怀疑是路由的问题，请赐教！

路由配置：
.state('manager_reportForm', {

        url:'/manager_reportForm',
        templateUrl: 'manager_reportForm',
        
    })
    .state('manager_reportForm.pandect', {
        url:'/pandect',
        templateUrl: 'pandect',
        controller:'pandect'
    })
    .state('manager_reportForm.manager_serverRoute', {
        url:'/manager_serverRoute',
        templateUrl: 'manager_serverRoute',
        controller:'manager_serverRoute'
    })

一级路由：
ui-sref='manager_reportForm.pandect'
<li><span class="glyphicon glyphicon-comment"></span>报表</li>

二级路由：

    <div class='manageReportForms_route'>
        <a ui-sref=".pandect" class='pandect'>总览</a>
        <a ui-sref=".manager_serverRoute" class='manageReportForms_serverRoute'>客服</a>
    </div>
    <div class='manageReportForms_option'>
        <div class='manageReportForms_ipt'>
            <div class='manageReportForms_context'><span>昨天</span><i class='manageReportForms-icon'></i></div>
            <div class='manageReportForms_date'>
                <ul class='manageReportForms_ul'>
                    <li>昨天</li>
                    <li>过去7天</li>
                    <li>过去30天</li>
                </ul>
                <p>自定义范围</p>
                <div class='date-parent'>
                    <div class="custom">
                        <input type="text" class="u-ipt form-date u-ipt-first" value="2017-01-01" readonly>
                    </div>
                    <div class="custom custom-margin">
                        <input type="text" class="u-ipt form-date u-ipt-second" value="2017-01-01" readonly>
                    </div>
                </div>
                <div class='date-dv-btn'>
                    <button class='date-btn'>确定</button>
                    <p class='cue'>你输入的日期有误，请重新输入</p>
                </div>
            </div>
        </div>
        <div class='manageReportForms_btn'>
            <a class="download" >导出当前数据</a></div>
    </div>
</div>

解决方案

是否尝试过。点击客服标签的时候将标识改成客服的标识。点击总览的时候才是总览的标识。当进入页面的时候给个默认值就好

<div class='manageReportForms_route'>
    <a ui-sref=".pandect" key='all' class='pandect on'>总览</a>
    <a ui-sref=".manager  key='waiter'_serverRoute" class='manageReportForms_serverRoute'>客服</a>
</div>


这样   把标识写到key里  下载的时候。获取当前高亮的标签的key值

例如
$('.manageReportForms_route .on').attr('key');

这篇关于javascript - angularjs的二级路由的js会互相影响，这是为啥？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！