AngularJS嵌套視圖不工作

Question

我正在研究一個angularjs應用程序示例。我在頂部有一個標題來顯示麪包屑和登錄/註銷按鈕。在左邊，我想要一個菜單​​有不同的選項;例如，菜單將包含用戶，聯繫人，課程等。我正努力在屏幕的右側顯示數據。我正在使用angularjs和Asp.Net MVC 4.正如你從下面的screeshot中看到的，唯一沒有顯示的是屏幕右側的細節。我也在plunkr工作。這是迄今爲止我所擁有的一切的鏈接。 Application in Plunkr

//This is the app controller 
    var App = angular.module('App', ['ui.router']); 

//App.controller('MenuController', MenuController); 
//App.controller('ContactController', ContactController); 
App.config(['$stateProvider', '$locationProvider', '$httpProvider', '$urlRouterProvider', 
    function ($stateProvider, $locationProvider, $httpProvider, $urlRouteProvider) { 
     $locationProvider.hashPrefix('!').html5Mode(true); 
     // $urlRouteProvider.otherwise("/Menu"); 
     $stateProvider 
     .state('Menu', 
      { 
       url: '/Menu', 
       views: { 
        'TopContainer': { 
         templateUrl: '/Account/Menu', 
         controller: 'MenuController' 
        }, 
        'bottomContainer': { 
         templateUrl: '/Contact', 
         controller: 'ContactController' 
        } 
       } 
      }) 
     .state('Menu.Contact',{ 
      url: '/Contact', 
       views: { 
        'TopContainer': { 
         templateUrl: '/Account/Menu', 
         controller: 'MenuController' 
        }, 
        'bottomContainer': { 
         templateUrl: '/Contact', 
         controller: 'ContactController' 
        } 
       } 
      }) 
     .state('Menu.Contact.Detail', 
     { 
      url: '/Detail', 
      views: { 
       'TopContainer': { 
        templateUrl: '/Account/Menu', 
        controller: 'MenuController' 
       }, 
       'bottomContainer': { 
        templateUrl: '/Contact', 
        controller: 'ContactController' 
       } 
      } 
     }); 
     $urlRouteProvider.otherwise('/Menu'); 

    }]); 


App.controller('MenuController', function ($scope, $state) { 
$scope.username = "test"; 
$state.transitionTo('Menu.Contact.Detail'); 
}); 

App.controller('ContactController', function($scope,$state){ 
    $scope.reviewMessage = 'My Contacts'; 
    $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }]; 
}); 
MenuController.$inject = ['$scope', '$state']; 

Answer 1

讀取文件幾次後，我更改了狀態，正在採取的方式。在下面的變化發生後，它按預期工作。

$stateProvider 
.state('App', { 
     url: '/App', 
     views: { 
      'header': { 
       templateUrl : '/Menu/Header' 
      }, 
      'content': { 
       templateUrl: '/Menu/Content' 
      } 
     'leftmenu': { 
       templateUrl : '/Menu/LeftMenu' 
     } 
     } 
}) 
.state('App.Contact',{ 
      url: '/Contact', 
       views: { 
        'content@': { 
         templateUrl: '/Account/Contact', 
         controller: 'ContactController' 
        } 
     } 
    });