0

メインページ、つまり、2 つのビュー (leftview) View1.html と (rightview) view2.html を持つ index.html があるシナリオがありますが、leftview でレコードを選択すると、右側のビューを view2.html からview3.html.

私は使っている 

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

ビューを View2.html から View3.html に変更するには

しかし、URL が変更されてdetails/{id} いることはわかりますが、UI (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>

どんな助けでも高く評価されます。必要に応じて、さらにコードを尋ねてください。

4

1 に答える 1

0

最初の方法は、ターゲットui-viewをビュー 2 に配置することです。

<div>

  <h3>View 2</h3>

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

</div>

実例あります

'rightPanel@'2 つ目は、子状態のルート ビュー プレースホルダーをターゲットにすること'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',
        }
     }
})

実例あります

絶対命名 (親のui -view とは異なるターゲット) について何かを読んでください。

于 2015-10-25T05:28:07.193 に答える