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'
                    }
        }
    });

AngularJS嵌套视图无法正常工作

1 个答案: