如何在 Angular js 中应用条件 ui 视图答案

【问题标题】：How to apply conditional ui-views in angular js如何在 Angular js 中应用条件 ui 视图
【发布时间】：2016-05-19 23:59:22
【问题描述】：

默认情况下，我想加载一个带有注册/登录选项的主页，该页面中没有页眉或页脚。用户成功登录后，我会将用户重定向到 loggedIn.html 页面，该页面具有固定的页眉、侧边栏和页脚。

问题是如何防止在我加载主页时应用页眉、侧边栏和页脚。

状态提供者：

var sidebar = {
    templateUrl: 'views/SideBar.html',
    controller: function ($scope) {
    }
};

$stateProvider
.state('Home', {
    url: "/Home",
    views: {
        sidebar: sidebar, //Commented this line out but didn't work
        content: {
            templateUrl: 'views/Home.html',
            controller: function ($scope) {
            }
        }
    }
})

如果您在上面的代码中看到，我注释掉了侧边栏视图的行，但它仍然占据了主页上侧边栏的位置

HTML：

<div id="wrapper">

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

</div>

<div ui-view="footer"></div>

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

使用基于 $state.current.name 的 ng-if，这样您的标题 div 标记将如下所示：

<div ui-view="header" ng-if="$state.current.name!='home'">

【讨论】：

我不想在主页上应用页眉、页脚和侧边栏，但其他页面可以拥有它
对不起。我把它改成不相等。你明白了吗？它应该很简单。
我不确定您是否完全按照我发布的内容或使用它作为指导，但如果您完全按照，请将其更改为 ng-if="$state.current。 name!='Home'" 因为你的状态就是这样定义的。您也可以在控制器中创建一个变量并使用 ng-if 进行检查。