Angular-UI 路由器嵌套视图不适用于某些移动浏览器

Question

我正在为应用程序使用 angular ui-router，但出于某种原因，嵌套视图仅针对桌面浏览器加载，Chrome 用于 android 但是不适用于其他移动浏览器，例如 chrome 用于 iPhone、三星浏览器用于 android、Safari 用于 iPhone.I ，不知道是不是我的"states"和模板配置不对。

这是我的代码：

 $urlRouterProvider.otherwise(function ($injector) {
        var $state = $injector.get('$state');
        var $rootScope = $injector.get('$rootScope');
        var $stateParams = $injector.get('$stateParams');
        if (typeof $stateParams.token == 'undefined') {
             $rootScope.errorList = [];
             $rootScope.errorList.push("Token is invalid");
             $state.go('error');
        }
    });

    $stateProvider       
        .state('index',
        {
            url: '/:token/',
            views: {
                '': {
                    templateUrl: 'AngularJS/Templates/indexView.html',
                    controller: 'candidateController as candCtrl'
                },
                'sectioncandidate@index': {
                    templateUrl: 'AngularJS/Templates/candidatesView.html'
                }
            }

        })

        .state('error',
        {
            url: '/error',
            templateUrl: 'AngularJS/Templates/errorView.html',
            controller: 'errorController as errorCtrl'

        })

     .state('index.details', {
         url: 'details',
         views: {
             'sectioncandidate@index': {
                 templateUrl: 'AngularJS/Templates/candidateView.html'
             }
         }

     });

模板具有以下层次结构：

index.cshtml

<div class="main-container" ui-view></div>

indexView.html

<h3 class="header-title">This is the header from the parent view</h3>

<div class="body-content">
   <div ui-view="sectioncandidate"></div>
</div>

candidatesView.html

<h1>This is the nested view!!!!</h1>

我正在加载以下库

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-aria.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-messages.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script>

<script src="~/AngularJS/Modules/app.js"></script>
<script src="~/AngularJS/Services/applicationService.js"></script>
<script src="~/AngularJS/Controllers/candidateContoller.js"></script>
<script src="~/AngularJS/Controllers/errorController.js"></script>

非常感谢任何帮助。

Answer 1

When方法可以试穿

 var app = angular.module('Appname',['ngRoute']);
  app.config(function($routeProvider){
         $routeProvider.when('/',{
         templateUrl :"1st Path Of File",
         controller :"FirstController"
         })
         .when('/AnchortagIdHere',{
         templateUrl :"2nd Path Of File",
         controller :"2ndController"
         }) 
         .otherwise('/',{
         templateUrl :"1st Path Of File",
         controller :"FirstController"
          });
   });

Answer 2

好吧，在逐行剖析应用程序后，我意识到嵌套视图的问题不完全是因为 ui-router 组件，问题在于嵌套视图使用的控制器views 使用的是 angular material 对话框。这些 angular material 对话框 link 控制器和模板的方式对某些移动浏览器造成冲突，因此未显示嵌套的命名视图。

这解决了问题：

在我使用这样的代码编写对话框之前：（它应该与 es6 一起使用）

  this.$mdDialog.show({
  targetEvent: event,
  templateUrl: 'path/mytemplate.html',
  controller: () => this,
  controllerAs: 'ctrl'
  });

我改变了这样的事情：（link 没有 es6 的控制器的方式）

var self = this;

this.showTabDialog = function(ev) {
    $mdDialog.show({
        controller: function () {
            return self;
        },
        controllerAs: 'ctrl',
        templateUrl: 'tabDialog.tmpl.html',
    });
};

希望对某人有用。

Angular-UI 路由器嵌套视图不适用于某些移动浏览器

Angular-UI Router Nested Views Not Working for some Mobile browsers

angularjs

angular-routing

angular-ui-router