zoukankan      html  css  js  c++  java
  • 如何使用 uirouterextras

    为了使用ui-router创建tabs构架,使用ui-router-extras

    使用方法:

    0. 安装包

    bower install ui-router-extras --save-dev

    1. 引入js文件

    <script type="text/javascript" src="{% static 'bower_components/angular-ui-router/release/angular-ui-router.min.js' %}"></script>

    <script type="text/javascript" src="{% static 'bower_components/ui-router-extras/release/ct-ui-router-extras.min.js' %}"></script>

    2. 在app.js中

        angular.module('****',[ 'ct.ui.router.extras' ]);

        angular.module('****').run(run);

        run.$inject = ['$rootScope','$state']

        function run($rootScope, $state){

          $rootScope.$state = $state;

        }

    3. 在index.html中,需要几个并列的ui-view,拥有不同命名,每个route 的state定位到一个ui-view。使用ng-show来控制显示哪个ui-view

      <div ui-view='tab1' ng-show="$state.includes('tab1')></div>

      <div ui-view='tab2' ng-show="$state.includes('tab2')></div>

    4. 在app.route.js中

        

    var searchState = {
    
            name: 'tab1',
    
            url: '/tab1',
    
            sticky: true,
    
            dsr: true,
    
            views: {
    
                'tab1': {
    
                         templateUrl: '/path/to/template'
    
                 }
    
             },
    
        }
    
                

      tab2类似。


    注:

    1. 只须引入ui-router的js文件,在app.js中无须依赖ui-router,改成ct.ui.router.extras即可

    2. 需要sticky的ui-view一定需要命名。若有不需要sticky的ui-view或者tab,需要预留一个无命名的ui-view

    3. 一个named ui-view只能被target一回。

    未完待续,随时补充修改。

  • 相关阅读:
    Java:面向对象的编程语言
    Java基本数据类型
    NotePad++安装及配置
    MarkDown的黄金搭档Typora编辑器
    rabbitmq常用命令【转载】
    rabbitmqweb管理端口http://localhost:15672/ 无法访问可能出现的问题
    又一个关于TP5的坑 模板页注释了的 {aaa} 依然是会被访问的
    关于layui的分页
    使用TP5容易遇到的坑
    TP5访问不了控制器
  • 原文地址:https://www.cnblogs.com/ifykwf/p/5973744.html
Copyright © 2011-2022 走看看