Question

我正在为应用程序使用角度ui-router，但由于某种原因，嵌套视图仅加载用于桌面浏览器和Chrome for Android但不适用于其他移动浏览器，例如适用于iPhone的Chrome，适用于Android的Samsung浏览器，适用于Safari的Safari iPhone.I一直在搜索，但我找不到任何理由，为什么它的行为，我不知道是否可能配置我的＆＃34;状态＆＃34;和模板不正确。

这是我的代码：

 $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

您可以在方法

时尝试

 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组件，问题是嵌套视图使用的控制器是使用角度材质对话。这些角度材质对话框链接控制器和模板的方式是为某些移动浏览器创建了冲突，因此未显示嵌套的命名视图。

这解决了问题：

在我使用这样的代码写一个对话框之前:(它应该与es6一起使用）

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

我改变了类似的东西:(没有es6链接控制器的方式）

var self = this;

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

希望它对某人有用。

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

2 个答案: