AngularJS 嵌套视图不工作

Question

我正在研究 angularjs 应用程序示例。我在顶部有一个 header 来显示面包屑和 login/logout 按钮。在左边，我想要一个包含不同选项的菜单；例如，菜单将有 Users、Contacts、Course 等。我很难在屏幕右侧显示数据。我正在使用 angularjs 和 Asp.Net MVC 4。从下面的屏幕截图中可以看出，唯一没有显示的是屏幕右侧的细节。我也在 plunkr 工作。这是我目前所拥有的一切的 link。 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'
                    }
        }
    });

AngularJS 嵌套视图不工作

AngularJS Nested View not Working

angularjs

asp.net-mvc-4

ng-view