Question

我尝试过各种各样的爱好者而没有任何运气。

我有两个ui-views：

<div ui-view class="expand"></div> //Inside index.html

<div ui-view></div> //Inside home.html

这是我的路线：

$stateProvider
            .state('home', {
                url: '/',
                views: {
                    '@': {
                        templateUrl: 'app/components/home/home.html',
                        controller: 'HomeCtrl'
                    }
                }
            })
          .state('clients', {
              url: '/clients',
              views: {
                  '@home': {
                      templateUrl: 'app/components/clients/clients.html',
                      controller: 'ClientsCtrl'
                  }
              }        
          })

我已尝试在视图上放置名称并以不同方式调用它们，但即使路径网址发生更改，clients.html也永远不会显示。

Answer 1

我不完全熟悉您使用$stateProvider的视图语法。我会给你两个版本，第一个看起来与你的例子非常相似，第二个版本与最佳实践更加一致。

    $stateProvider
        .state('base', {
            abstract: true,
            url: '',
            templateUrl: 'views/base.html'
        })
        .state('login', {
            url: '/login',
            parent: 'base',
            templateUrl: 'views/login.html',
            controller: 'LoginCtrl'
        })
        .state('dashboard', {
            url: '/dashboard',
            parent: 'base',
            templateUrl: 'views/dashboard.html'
        })

最佳实践版本：

(function () {
'use strict';
angular
    .module('app.core')
    .config(stateConfig)
    .run(errorHandler);

stateConfig.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
getZipCodes.$inject = ['googleMapService'];
errorHandler.$inject = ['$rootScope', 'logger'];

function stateConfig($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/');

    $stateProvider.state('core', {
        url: '/',
        templateUrl: 'app/core/core.html',
        controller: 'CoreController',
        controllerAs: 'vm',
        resolve: {
            getZipCodes : getZipCodes
        }
    })
}

/** @desc: Ping the back-end for a JSON object that will be converted into an array of NYC zip codes */
function getZipCodes(googleMapService) {
    return googleMapService.getZipCodes();
}

/** @desc: $stateChangeError handler */
function errorHandler($rootScope, logger) {
    $rootScope.$on('$stateChangeError', function (error, event) {
        if (error) { logger.error('Error while changing states', error); }
        if (event) { logger.error('The event that caused the error', event); }
    })
}
})();

UI路由器嵌套视图

1 个答案: