一部のモバイルブラウザでは角度UIルータのネストされたビューが動作しない

Question

角度ui-routerをアプリケーションに使用していますが、何らかの理由でネストされたビューがデスクトップブラウザとAndroid用Chromeではロードされますが、 iPhone用のクロムとして、アンドロイド用のサムスンブラウザ、iPhone用のSafariで検索していますが、私の "状態"とテンプレートの設定が正しくないかどうかわかりません。

、これは私のコードです：

$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。 htmリットル

<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

まあ、私はネストされたビューとの問題は、UI-ルータコンポーネント、問題の正確でなかったことを実感できたときに試すことができますネストされたビューで使用されているコントローラが、角度のあるマテリアルダイアログを使用していたことです。これらの角度のマテリアルダイアログがコントローラーとテンプレートをリンクする方法は、一部のモバイルブラウザーで競合を引き起こしていたため、ネストされた名前付きビューは表示されませんでした。

この

は、問題を修正：

私はペンに、このようなダイアログを、コードを使用していた前

：（ES6で動作するようになっている）私はこのような何かのために変更

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

：（コントローラーをリンクする方法はありません。

var self = this; 

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

希望する人には便利だと思います。

Answer 2

あなたは、アプリケーションが行ずつを解剖した後、方法

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" 
      }); 
    });