Issue with $state.go while using ui-route the url changes to the new state but could not see the html change with new view content

Question

I have a scenario where I have a main page i.e index.html with 2 views (leftview) View1.html and (rightview) view2.html, But on selecting a record on leftview i want to change the right view from view2.html to view3.html.

I am using

$scope.$state.go('reg.detail', { 'id': item.Id });

to change the view from View2.html to View3.html

But I see the url changes to details/{id} but I don't see the UI(html markup) changes to view3.html (hence the controller of view3 is also not getting fired(removed the controller code below for simplicity))

var app = angular.module('app', ['ui.router']);

(function () {
    'use strict';

    angular
        .module('app')
        .config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
            function ($stateProvider, $locationProvider, $urlRouterProvider) {
                $urlRouterProvider.otherwise('/');
                $stateProvider
                .state('reg', {
                    url: '/',
                    views: {
                        'leftPanel': {
                            templateUrl: 'app/View1.html',
                            controller: 'view1Ctrl'
                        },
                        'rightPanel': {
                            templateUrl: 'app/View2.html',
                            controller: 'view2Ctrl'
                        }
                    }
                })
                .state('reg.detail', {
                    url: 'detail/:id',
                    parent: 'reg',
                    templateUrl: 'app/View3.html',
                    controller: 'view3Ctrl'
                   
                })

            }]);

})();


(function () {
    'use strict';

    angular
        .module('app')
        .controller('appCtrl', appCtrl);

    appCtrl.$inject = ['$scope', '$rootScope','$state'];

    function appCtrl($scope, $rootScope, $state) {


    }
})();

index(main) page code :
<div auto-size>
    <div ui-view="leftPanel" >Left panel is loading...</div>
    <div ui-view="rightPanel" >Right panel is loading...</div>
</div>

Any help would be highly appriciated. Feel free to ask me more code if required.

score 0 · Answer 1 · edited May 23 '17 at 11:58

The first way to go, is to place a target ui-view into view 2:

<div>

  <h3>View 2</h3>

  <hr />
  // placeholder in the view 2 for view 3
  <div ui-view=""></div>

</div>

There is a working example

The second is to target the root view placeholder 'rightPanel@' in the child state 'reg.detail':

.state('reg.detail', {
      url: 'detail/:id',
      parent: 'reg',
      views : {
        // this will really replace the view 2 with view 3
        'rightPanel@': {
          templateUrl: 'app/View3.html',
          controller: 'view3Ctrl',
        }
     }
})

There is a working example

Read something about absolute naming (targeting different than parent ui-view) for example here Angularjs ui-router not reaching child controller

Issue with $state.go while using ui-route the url changes to the new state but could not see the html change with new view content

1 Answers1