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

Question

I am using angular ui-router for an application, but for some reason the nested views are loaded only for desktop browsers and Chrome for android but not for other mobile browsers such as chrome for iPhone, Samsung Browser for android, Safari for iPhone.I have been searching but I could not find any reasons why it behaves like that, I don't know if maybe the configuration of my "states" and templates are not correct.

and this is my code:

 $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'
             }
         }

     });

The templates have the following hierarchy:

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>

And i am loading the following libraries

<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>

I would really appreciate any help.

Samudrala Ramu · Accepted Answer · 2016-08-05 08:48:10Z

0

You Can Try On When Method

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

answered Aug 5, 2016 at 8:48

Samudrala Ramu

2,1041 gold badge17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D.B Over a year ago

Well, I decided to use ui-router instead of ngroute because it is supposed to highly improve and enhance routing capabalities. That is why the use of "State" instead of "when" methods. ui-router allows to work easily with nested views and multiple named views. So i wouldn't like to change if I can find a solution for my issue. Thanks.

D.B · Accepted Answer · 2016-08-06 12:02:21Z

Well, after the application was dissected line by line I could realize that the issue with the nested views were not exactly because of the ui-router component, the problem was that the controller used by the nested views was using an angular material dialog. The way these angular material dialog link a controller and a template, was creating a conflict for some mobile browsers, therefore the nested, named views were not displayed.

This fixed the problem:

Before I was using a code like this to pen a dialog: (it is supposed to work with es6)

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

I changed for something like this: (the way to link a controller Without es6)

var self = this;

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

hope it could be useful for someone.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related