通過ui.router中的ng-click更改嵌套視圖

Question

我試圖在視圖內插入視圖。但它只在定義的狀態下工作，但是當我嘗試在ngClick的幫助下更改視圖時，狀態丟失了路徑。

它就像

查看1
--sub查看1.1
------小組副視點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爲您的代碼