Угловой UI-Router с именованными представлениями, вложенная навигационная панель не отображается - PullRequest
Новая
       28

Угловой UI-Router с именованными представлениями, вложенная навигационная панель не отображается

0 голосов
/ 28 октября 2018

После обновления 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>

Есть мысли?

1 Ответ

0 голосов
/ 29 октября 2018

Поскольку загрузочные представления вложены в компоненты и приложение, родительские компоненты не будут загружаться снова в приведенном ниже примере заголовка.Таким образом, навигация остается на нескольких страницах.

Надеюсь, что это полезно. 

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>
...