zoukankan      html  css  js  c++  java
  • angular的路由跳转,的监听$rootScope.$on

    使用angular来做项目时,习惯性的使用第三方路由插件ui-router配置路由。每一个状态都对应着一个页面,

    因此对路由状态改变的监听也变的十分重要。

    可以使用:$rootScope.$on(…….)监听

    $stateChangeStart: 表示状态切换开始

    $stateNoFound:没有发现

    $stateChangeSuccess:切换成功

    $stateChangeError:切换失败

    回调函数的参数解释:

    event:当前事件的信息

    toState:目的路由状态

    toParams:传到目的路由的参数

    fromState:起始路由状态

    经典例子:

    我的项目中有两个模块,allIdea,myIdea,这两个模块都有一个编辑,因为这两个模块编辑功能完全一样,因此将其写为公共模块editCtrl…….

    点击:allIdea的编辑,以及myIdea的编辑都会进入编辑模块

    现在的问题是:在编辑模块刷新页面的时候,会丢失掉tab的状态信息(tab不会高亮,或者出现混淆的状况)

    解决方案(不唯一)

    使用$$rootScope.$on('$stateChangeStart....)监听状态的改变

    eidtCtrl中(编辑模块的控制器中):

    $rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams){
        //tab的状态的改变
        localStorage['from_idea']=fromState.name;//获得上一级路由,存储在localStorage中
    });
    localStorage['from_idea']=="home.ideas.myIdeas"?$rootScope.eval = 'myIdeas':$rootScope.eval='allIdeas';
    //home.ideas.myIdea是myIdea页面对应的状态,如果localStorage['from_idea']等于home.ideas.myIdeas,则myIdeas高亮,否则allIdeas高亮

    html:页面

    <div class="ideas-list">
        <div class="my-row">
            <div class="amdin-nav" >
                <ul class="list-inline adminAction-listHeader">
                    <li ui-sref="home.ideas.allIdeas" class="hand">
                        <div ng-class="{active:eval=='allIdeas'}" class="my-btn-lg"  ng-show="can_see_all_idea">全部创意</div>
                    </li>
                    <li ui-sref="home.ideas.myIdeas"  class="hand" >
                        <div class="my-btn-lg" ng-class="{active:eval=='myIdeas'}" >我的创意</div>
                    </li>
                    <li ui-sref="home.ideas.appr_list" class="hand" >
                        <div class="my-btn-lg"  ng-class="{active:eval=='waitList'}">待审批</div>
                    </li>
                    <li ui-sref="home.ideas.approval" class="hand" >
                        <div class="my-btn-lg"  ng-class="{active:eval=='hasApproval'}" >已审批</div>
                    </li>
                </ul>
            </div>
            <div class=" list-content"  ui-view="part" >
    
            </div>
        </div>
    </div>
    

      

  • 相关阅读:
    CH02 FPGA设计Verilog基础笔记(二)
    同一个按键短按与长按的区别触发
    树莓派 -- 输入设备驱动 (key) 续2: 转载 Setting up a GPIO-Button “keyboard” on a Raspberry Pi
    树莓派 -- 输入设备驱动 (key) 续1
    树莓派 -- 输入设备驱动 (key)
    树莓派 -- 按键 (key)使用BCM2835 gpio library
    leds-gpio driver 续1
    leds-gpio driver
    使用CSDN-markdown编辑器
    树莓派
  • 原文地址:https://www.cnblogs.com/evaling/p/6699066.html
Copyright © 2011-2022 走看看