【Angular】路由跳转问题；

更新

2017年10月11日，问题已经得到解决，经过试验，是因为questionAddController.js代码导致，在路由前一级页面，添加此页面，前一页面也会出现“必须二次点击才能显示”；（该js文件已经正常加载，但是不能正常显示；）所以，在问题出现在该页面内；在大胆注销该页面一部分很可疑的代码后，页面跳转正常；
截图如下：

注销了图中1-8行代码；问题解决；

华丽的分割线：

---

一、问题描述

使用angular中html中的ui-sref跳转页面，第一次点击，会一直处于加载中的状态；此后，只要不刷新，就没有问题，但是，一旦刷新，或者重新登录，初始化的时候功能不能实现；此后任意一次都可以实现；
html页面代码：

<script type="text/ng-template" id="qbank.html">
    <div class="panel-heading font-bold">按照题型添加</div>
    <div class="wrapper-md">
        <a class="btn btn-default" ui-sref="smart.fxrj.qbank.add({type:'radio'})" ng-click="cancel()">单选题</a>
        <a class="btn btn-default" ui-sref="smart.fxrj.qbank.add({type:'check'})" ng-click="cancel()">多选题</a>
        <a class="btn btn-default" ui-sref="smart.fxrj.qbank.add({type:'cloze'})" ng-click="cancel()">填空题</a>
        <a class="btn btn-default" ui-sref="smart.fxrj.qbank.add({type:'tf'})" ng-click="cancel()">判断题</a>
        <a class="btn btn-default" ui-sref="smart.fxrj.qbank.add({type:'qa'})" ng-click="cancel()">问答题</a>
    </div>
    <footer class="text-right bg-light lter modal-footer">
        <button type="button" class="btn btn-default" ng-click="cancel()">关闭</button>
    </footer>
</script>

这里每一个题型后面，都有一个on-click()方法，这是因为选完题型之后，就把屏幕最前面的模态框给关闭掉；

路由代码：

.state('smart.fxrj.qbank.add', {
                        url: '/add?type',
                        templateUrl: 'tpl/fxrj/qbank/add.html',
                        resolve: load(['js/fxrj/qbank/controller/QBankAddController.js'])
                    })

templateUrl：是实际要到达的页面；
resolve：是依赖，表示上面的html是跟哪个js绑定的；

二、逻辑过程

首先，在question的列表里面，我们使用了一个增加单个题目的方法：addQuestion();这里首先到达的是题型选择页面，然后再到具体的添加具体某个题目详情的页面；即：

1.添加——>2.题型选择（单选，多选，填空，判断，问答）——>3.具体的某个题型添加页面；

然后，我们在Question列表的页面包含了一个qbank（即单个题目组成的题目池）的列表：qbank.html;
当我们点击图中红色框内的addQuestion()方法时，我们会在Question列表的js控制器中添加一个方法：

        //跳转到按照类型添加单个题目；
        // warn 单个题目qbank添加方法；
        $scope.addQuestion=function () {
            modelInsatnce11.render({},"qbank.html","QBankListController");
        };

这里，我们会显示出来题型选择列表（也就是qbank.html），即：

当我们点击单选题的时候，ui-sref就会把单选题（radio）赋值给type，这样，我们就组装了一个单选题添加的页面；同理，点击多选题（check）的时候，我们会把check赋值给type，这样，就进入多选题添加的页面；
问题就来了，当我们第一次点击5个题型中任意一个，该列表不会直接跳转到具体的页面，而是处于一直等待状态；当我们第2次点击5个题型中任意一个题型时，该列表才会跳转，并且只要不刷新，功能不受影响；一旦刷新，或者重新登录，则初始化点击的时候，必然会失效；这里不知道为什么；
看了网上的几个方法：
1.在qbank.html页面ui-sref后面添加

<a ui-sref="xxxx" ui-sref-opts="{reload:true}">xxxx</a>

2.在$scope后面添加一个$apply();

$location.path('/result');
$scope.$apply();

三、总结

这里有两个帖子1，帖子2将路由跳转（页面跳转），ui-sref和$scope.location的区别，讲得挺好的，大家可以看看；问题还没有解决，希望大神可以赐教；