Question

我正在尝试在视图中插入视图。但它只在定义的状态下工作，但当我尝试在ngClick的帮助下更改视图时，状态丢失了路径。

就像

查看1
- 子视图1.1
------ Sub Sub View 1.2

但是只会出现一个基于点击的子视图。

代码在这里

    .config(function($stateProvider, $urlRouterProvider) {

    //$urlRouterProvider.otherwise('/login');

    $stateProvider
        .state('login',{
            url:'/login',
            templateUrl: 'partials/login.html'

        })
        .state('home',{


            url:'/home',
            views:{
                '':{templateUrl:'partials/home.html'},

                'grid@home':{templateUrl:'partials/home-grid.html'},

                'list@home':{templateUrl:'partials/home-list.html'},

                },
                controller: 'homeController'


            })
    })

和我的控制器

    .controller('homeController', function($rootScope, $scope, $location){
        $rootScope.bodyClass = "backround-img1"


        $scope.gridClick = function(){

            $scope.Tview = 'grid@home'

        }
        $scope.listClick = function(){

            $scope.Tview = 'list@home'

        }

    })  ;

在我的主视图中，我已将模型声明如下：

<a ng-Click="gridClick()">Grid</a>
<a ng-Click="listClick()">List</a>

----------------------------------------

     <div ui-view="{{Tview}}"></div>

Answer 1

建议你

$state.go('stateName');

你可以在你的控制器中使用这样的东西

$scope.changeView=function()
  {
    $state.go('new');
  }

配置应为

$stateProvider
        .state("home", {
          url: "/",
          templateUrl: "newView.html",
          controller: "MainCtrl",
        })
        .state("new", {
          url: "/",
          templateUrl: "someOtherView.html",
          controller: "MainCtrl",
        });

以下是代码的LIVE

通过在ui.router中单击ng来更改嵌套视图

1 个答案: