Question

自从将npm更新到最新版本以来，我一直尝试维护Angular 1.5.1，UI-Router 0.2.18，但似乎没有任何渲染。

我需要一种布局，其中顶部用户界面视图 nav 保留在多个页面（例如州）中。该页面具有一个路径变量，其中包含传递给它的状态的名称，该变量是附加的.run函数。

代码（在.coffee中）

angular.module('xxx', ['ui.router'])
.config([
    '$stateProvider',
    '$urlRouterProvider',
    '$locationProvider',
    '$sceProvider',
    ($stateProvider, $urlRouterProvider, $locationProvider, $sceProvider) ->

        $sceProvider.enabled(false)

        $urlRouterProvider.otherwise('/')

        query = {
            name: 'query',
            url: '/query',
            views: {
                'nav@': {
                    templateUrl: 'nav/nav.html'
                },
                'main@query': {
                    templateUrl: 'query/query.html'
                },
                'builder@query': {
                    templateUrl: 'query/query-builder.html'
                },
                'result@query': {
                    templateUrl: 'query/query-result.html'
                }
            }
        }

        $stateProvider.state(query)

        for r in ["a", "b", "c", "d", "e"]
            query2 = {
                name: r,
                url: r,
                views: {
                    'nav': {
                        templateUrl: 'nav/nav.html'
                    }
                }
            }
            $stateProvider.state(query2)
])

.run([
    '$rootScope',
    '$state',
    '$window',
    '$timeout',
    ($rootScope, $state, $window, $timeout) ->
        path = $window.path
        if path
            $state.transitionTo(path)

])

及相关模板文件：

<ng-app="xxx">
<!-- Main base.html-->
    <div ui-view="nav">
<!-- Specific query page -->
    <div ui-view="main">
        <!-- Within query page, nested ui-views -->
        <div ui-view="builder"></div>
        <div ui-view="result"></div>

有什么想法吗？

Answer 1

这里是使用nested views的文档。
这里是文档，区别在于route vs ui-route

由于加载嵌套在组件和应用程序中的视图，因此在以下示例的标头中，父组件将不会再次加载。因此，导航仍然跨越几页。

希望这会有所帮助。

function statesetup($stateProvider, $urlRouterProvider, $stateParams) {
    console.log('Initiallizing State StartUp...');
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('main', {
            url: '/',
            template: 
            `
            	<header></header>
              <div ui-view>I am init </div>
            `
        })
        .state('main.a', { url: '/a',template: `<div>hi i am a </div>` })
        .state('main.b', { url: '/b',template: `<div>hi i am b </div>` })

}
function run($rootScope, $location, $state) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        console.log('RootState Changed...');
        var obj = { 
            event: event,
            toState: toState,
            toParams: toParams,
            fromState: fromState,
            fromParams: fromParams
        };
        
        return;
    });
}

angular.module('xxx', ['ui.router'])
    .component('header', { 
      template : `<ul>
        <li ng-click="$ctrl.nav('main.a')">a</li>
        <li ng-click="$ctrl.nav('main.b')">b</li>
       </ul>`,
       controller : function($state) { this.nav = (st) => $state.go(st); }
       })
    .config(['$stateProvider', '$urlRouterProvider', statesetup])
    .run(["$rootScope", "$location", "$state", run])
    ;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>

<div ng-app="xxx">
    <div ui-view></div>
</div>

具有命名视图的角度UI-Router，嵌套导航栏不呈现

1 个答案: