[anjularjs] ui-router嵌套ui-view不刷新问题

项目中遇到了嵌套ui-view时,点击ui-sref无效的现象,通过分析问题解决了该问题,记录一下.

问题背景:

在anjularjs + electron项目中需要在同一个界面保持部分div不变,点击按钮切换其他部分div.

图1 结构框架

如图所示,左边的map部分需要保留,右侧的div动态部分需要点击菜单的按钮进行动态切换html.(还没有写css,界面较丑)

由于技术有限,没有在angularjs中找到ui-view共同显示的方法,所以使用了ui-view嵌套叠加的方法.

app.js

function config($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when("/","/index");
    $stateProvider
        .state('index', {
            url: '/index',
            views: {
                'IndexPart': {
                    templateUrl: ('views/IndexPage.html'),
                    controller: 'indexPage',
                    controllerAs: 'iPage'
                }
            },
        })
        .state('index.Home', {
            url: '/Home',
            views: {
                'methodControl@index': {
                    templateUrl: ('views/HomeCtrl.html'),
                    controller: 'homeCtrl',
                    controllerAs: 'hCtrl'
                }
            },
        })
        .state('index.Multiple', {
            url: '/Multiple',
            views: {
                'methodControl@index': {
                    templateUrl: ('views/MultipleCtrl.html'),
                    controller: 'multipleCtrl',
                    controllerAs: 'mCtrl'
                }
            },
        })
        .state('index.Construct', {
            url: '/Construct',
            views: {
                'methodControl@index': {
                    templateUrl: ('views/ConstructCtrl.html'),
                    controller: 'constructCtrl',
                    controllerAs: 'cCtrl'
                }
            },
        })
        .state('index.Evolution', {
            url: '/Evolution',
            views: {
                'methodControl@index': {
                    templateUrl: ('views/EvolutionCtrl.html'),
                    controller: 'evolutionCtrl',
                    controllerAs: 'eCtrl'
                }
            },
        })
        .state('index.Risk', {
            url: '/Risk',
            views: {
                'methodControl@index': {
                    templateUrl: ('views/RiskCtrl.html'),
                    controller: 'riskCtrl',
                    controllerAs: 'rCtrl'
                }
            },
        })
    $urlRouterProvider.otherwise('/index');
}

在上述代码中使用了父子ui-view的方法,先默认将map加载进去,再将子ui-view使用ui-sref加载.

index.html

    
      0
    
    
      1
    
    
      2
    
    
      3
    
    
      4
    

按照网上的方法,使用嵌套ui-view的方法

存在问题:

页面加载刷新之后,按钮只可以点击一次,加载一个html,之后再点击也没有用了.

使用了网上查询的方法

方法一(刷新整体界面)
0
方法二(刷新当前界面)
0

都没有起到作用,网上方法大概就这样,其他的没有细究.

分析原因:

我的代码中父ui-view是默认加载的,没有通过ui-sref加载,所以我试验了添加一个按钮:

0

点击这个按钮过后再尝试点击其他的按钮就可以,不过也都只能点一次.

所以我想可不可以在点击按钮的时候先加载父ui-view的index路由,再加载需要的子ui-view

0

结果成功解决问题,写在这里供大家参考,希望可以为大家提供帮助.

刚开始学习angularjs和electron,欢迎大家互相交流.