Как предотвратить загрузку именованного представления с помощью ui-router?

0

У меня есть два братьев и сестер с именами, и я могу изменить только содержимое одного вида и сохранить неизменное.

Я в здание приложения, которое у меня есть не авторизован заголовок с ссылкой Войти и вошедший заголовок со ссылкой Выйти.

У меня есть следующий код:

index.html

<div ui-view="header"></div>
<div ui-view="content"></div>

В моей конфигурации приложения я установил следующее.

Это мое начальное состояние:

.state("sgi", {
        url: "/home",
        views: {
            'header': {
                templateUrl: 'views/main/header.html'
            },
            'content': {
                templateUrl: 'views/main/home.html',
                controller: 'homeController'
            }
        }
    })

Затем в моем заголовке у меня есть ссылка для шаблона Login, который является приведенным ниже набором состояний:

.state("sgi.login", {
        url: "/login",
        views: {
            'content@': {
                templateUrl: 'views/main/login.html',
                controller: 'loginController'
            }
        }
    })

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

Кроме того, в шаблоне заголовка у меня есть ссылка " О", в которой используется представление содержимого.

        .state("sgi.about", {
        url: "/sobre",
        views: {
            'content@': {
                templateUrl: 'views/main/about.html',
                controller: 'aboutController'
            }
        }
    })

Затем, после регистрации, у меня есть состояние, которое загружает другой шаблон в виде содержимого и в заголовке. В этом заголовке у меня есть ссылка на Log out, а также ту же ссылку на About, в которой используется одно и то же состояние sgi.about. Как в заголовке для журнала, так и в заголовке для записи у меня есть ссылка:

<a ui-sref="sgi.about">About</a>

Моя проблема в том, что когда я нахожусь в состоянии регистрации с шаблоном LoggedHeader, и я нажимаю "О себе", я хотел бы только изменить представление содержимого. Но происходит то, что оба вида изменены.

Как я могу изменить только представление содержимого и не изменять вид заголовка при вызове состояния sgi.about?

  • 0
    Я делаю директивы для своих заголовков и сохраняю представления для содержимого страницы. Если я хочу, чтобы заголовок изменялся в зависимости от того, вошли в систему или нет, или изменился в зависимости от того, какое представление я смотрю, тогда я использую изолированную область.
  • 0
    Я только что проверил это по этой ссылке .
Теги:
angular-ui-router

2 ответа

0
Лучший ответ

Вы не можете этого сделать. UI-маршрутизатор позволяет использовать одну ветвь состояний за раз. Это означает, что когда вы в sgi.about не можете иметь в виду, что у вас есть login или loggedin в фоновом режиме. Вы должны реализовать его на свой собственный, задав несколько вложенной about, которые имеют такой же спецификации.

var aboutState = {
    url: "/sobre",
    views: {
        'content@': {
            templateUrl: 'views/main/about.html',
            controller: 'aboutController'
        }
    };
....
.state("sgi.login.about", aboutState)
.state("sgi.loggedin.about", aboutState);

И в шаблоне заголовка вы используете относительное состояние в ui-sref=".about"

Поделиться
1

Вот пример директивы заголовка, которую я использую:

Сначала директива:

angular.module('app').directive('myHeader', function() {
    return {
        restrict: 'E',
        templateUrl: '',
        scope: {user: '=', location: '='},
        link: function(scope, elem, attrs) {

        }
    };

});

Html:

<div class="my-header">
    <p>
    {{::user.username}} <a href="#" Ng-show="user">log out</a> <a href="#" ng-show="!user">log in</a><br>
    {{::location}}
    </p>
</div>

В представлении html он будет выглядеть так:

<my-header user="$root.currentUser" location="location"></my-header>

Я бы разместил это внутри каждой точки зрения, что хочу включить заголовок. В этом виде контроллер я бы использовал:

Angular.module('app').controller('AboutController', ['$scope', function($scope) {
    $scope.location = 'About';
}]);

Это, конечно, очень простой пример, но вы можете видеть, как это позволит вам изменить логику, которая входит в заголовок. Вы можете использовать это, чтобы отображать различные ссылки, разные цвета, независимо от того, что вы хотите, как по местоположению, так и при входе пользователя в систему или выходе из него. Вы можете, конечно, добавить свои собственные переменные, чтобы определить другие факторы.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню