Question

我有一个场景，我有一个主页面，即index.html有2个视图（leftview）View1.html和（右视图）view2.html，但是在选择leftview上的记录时，我想从view2更改右视图.html到view3.html。

我正在使用

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

将视图从View2.html更改为View3.html

但我看到网址更改为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>

任何帮助都会受到高度关注。如果需要，请随时向我索取更多代码。

Answer 1

第一种方法是将目标 ui-view 放入视图2：

<div>

  <h3>View 2</h3>

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

</div>

有一个working example

第二种方法是在子状态'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',
        }
     }
})

有一个working example

阅读有关绝对命名的内容（定位与父ui-view不同），例如Angularjs ui-router not reaching child controller

在使用ui-route时，$ state.go发生问题，url更改为新状态，但无法看到新视图内容的html更改

1 个答案: