Question

我有两个名为views的兄弟姐妹，我只更改一个视图的内容并保持另一个视图不变。

我正在构建一个应用程序，我的未记录标题包含登录链接，而已记录的标题包含日志出链接。

我有以下代码：

的index.html

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

在我的app配置中，我设置了以下内容。

这是我的初始状态：

.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'
            }
        }
    })

然后，在记录后我有一个状态，在内容视图和标题视图中加载不同的模板。在这个标题视图中，我有一个指向注销的链接，以及与关于使用相同状态 sgi.about 的相同链接。在未记录的Header和记录的Header中我都有链接：

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

我的问题是当我使用LoggedHeader模板处于记录状态时，我点击关于我只想更改内容视图。但是会发生的是两种观点都发生了变化。

如何在调用sgi.about状态时只更改内容视图，并保持标题视图不变？

Answer 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';
}]);

这当然是一个非常简单的示例，但您可以看到这将如何允许您更改进入标头的逻辑。您可以使用它来显示不同的链接，不同的颜色，根据位置和用户登录或注销的任何需要。您当然可以添加自己的变量来确定其他因素。

Answer 2

你不能这样做。 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"

中的相对状态

如何使用ui-router阻止命名视图的加载？

2 个答案: