Угловой пользовательский интерфейс внутри другого пользовательского интерфейса

Question

Угловой пользовательский интерфейс внутри другого пользовательского интерфейса

0

в настоящее время работает над приложением, в котором я использую маршруты UML AngularJS. После поиска пары в течение нескольких часов для моей проблемы в Интернете, я все еще не могу понять, как моя проблема будет решена. Вот мой код, который я использую. Если кто-то может помочь в этом. Тогда я был бы очень благодарен.

Я просто хотел узнать код, как определить состояние для ui-view = "sidebar", как я определил для верхнего и нижнего колонтитулов в моем состоянии defaultLayout. Пробовал что-то, но не работал. Любая идея, пожалуйста, поделитесь.

HTML:

//====index.html=====//
<body ui-view="layout"></body>

//========default.html (nested view inside layout)=============//
<header ui-view="header"></header>
<div class="wrap">
    <div id="container">
        <div ui-view="alert"></div>
        <div ui-view></div>
    </div>
</div>
<footer ui-view="footer"></footer>


//=======products.html (another nested view inside empty ui-view in default.html file)========//
<div class="row"><div ui-view="sidebar"></div></div>

Код JS:

//=====states I have defined in my route files are=====//
$stateProvider.
        state('defaultLayout', {
            abstract: true,
            views: {
                'layout': {
                    templateUrl: 'views/layouts/default.html'
                },
                'header@defaultLayout': {
                    templateUrl: 'views/elements/header.html',
                    controller: 'HeaderCtrl'
                },
                'footer@defaultLayout': {
                    templateUrl: 'views/elements/footer.html',
                    controller: 'FooterCtrl'
                },
                'sidebar@defaultLayout': {
                    templateUrl: 'views/elements/sidebar.html',
                    controller: 'SidebarCtrl'
                },
                'alert@defaultLayout': {
                    templateUrl: 'views/layouts/alert.html',
                    controller: 'AlertCtrl'
                }
            }
        })
        .state('home', {
            url: '/',
            templateUrl: 'views/pages/home.html',
            controller: 'HomeCtrl',
            parent: 'defaultLayout'
        })
        .state('checkout', {
            url: '/pages/checkout',
            templateUrl: 'views/pages/checkout.html',
            controller: 'HomeCtrl',
            parent: 'defaultLayout'
        });

ankit verma 23 апр. 2016, в 12:24

Источник

0

Застряли здесь очень плохо. Может кто-нибудь, пожалуйста, помогите !!!!
ankit verma 23 апр. 2016, в 13:40
0

У меня была похожая проблема, и этот ответ помог мне решить ее.
HAok SAM 20 июнь 2018, в 08:41

Теги:

javascript

angularjs

web-frontend

angular-ui-router

angular-ui

1 ответ

Ещё вопросы

Застряли здесь очень плохо. Может кто-нибудь, пожалуйста, помогите !!!!
У меня была похожая проблема, и этот ответ помог мне решить ее.

softvar · Answer 1 · 2016-04-23T07-13-00.000Z

Точечная нотация

Вы можете использовать точечный синтаксис, чтобы вывести вашу иерархию в $ stateProvider. Ниже, contacts.list становится дочерним элементом контактов.

$stateProvider
  .state('contacts', {})
  .state('contacts.list', {});

Спасибо за ваши комментарии. Я пробовал тот же подход, но как-то не работает. Можете ли вы поделиться любым примером кода, если у вас есть, откуда я могу взять ссылку. Или вы можете помочь мне поделиться приведенным выше обновленным кодом, если можете. Еще раз спасибо.