Ошибка с $state.go при использовании ui-route, когда url изменяется на новое состояние, но не может видеть изменение html с новым содержимым представления

Question

У меня есть сценарий, где у меня есть главная страница, то есть index.html с 2 представлениями (leftview) View1.html и (rightview) view2.html, но при выборе записи в левом просмотре я хочу изменить правое представление с view2.html на view3.html.

я использую

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

изменить представление с View2.html на View3.html

Но я вижу изменения URL в details/{id} но я не вижу изменения пользовательского интерфейса (html-разметки) в view3.html (следовательно, контроллер view3 также не запускается (для простоты удалил код контроллера ниже))

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>

Любая помощь будет высоко ценится. Не стесняйтесь спрашивать меня больше кода, если требуется.

Answer 1

Первый путь - это поставить цель ui-view в представлении 2:

<div>

  <h3>View 2</h3>

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

</div>

Есть рабочий пример

Второй - нацеливание на заполнитель корневого представления. 'rightPanel@' в детском состоянии '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',
        }
     }
})

Есть рабочий пример

Прочтите что-нибудь об абсолютном именовании (нацеливание отличается от родительского пользовательского интерфейса), например, здесь пользовательский интерфейс Angularjs не достигает дочернего контроллера