0

我有一个场景，我有一个主页，即 index.html，有 2 个视图（左视图）View1.html 和（右视图）view2.html，但是在左视图上选择一条记录时，我想将右视图从 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@'在子状态下定位根视图占位符'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 不同的目标）的内容，例如这里Angularjs ui-router not reach child controller

于 2015-10-25T05:28:07.193 回答