Question

我希望有一个常见的index.html页面，其中包含指向所有模板htmls和菜单标签的链接。我想根据用户点击的标签仅显示特定标签。假设有3个菜单栏标签，1。登录2.注册3.电影

我只想在用户登录时显示电影标签。

这是我的示例index.html。

    <!DOCTYPE html>
<html ng-app="movieflix">

<head>
    <!-- bower:css -->
    <!-- endinject -->

    <!-- vendor:css -->
    <!-- endinject -->

    <!-- inject:css -->
    <!-- endinject -->

    <!-- app:css -->
    <!-- endinject -->
</head>

<body class="main">
<header>
    <ul class="nav nav-pills">
        <li><a href="#/movies">Movies</a></li>
        <li><a href="#/login">Login</a></li>
        <li><a href="#/register">Register</a></li>
    </ul>
</header>

<section ng-view>


</section>

<!-- bower:js -->
<!-- endinject -->

<!-- vendor:js -->
<!-- endinject -->

<!-- inject:js -->
<!-- endinject -->

<!-- app:js -->
<!-- endinject -->
</body>

</html>

我尝试使用控制器检查用户的选择，但这不起作用。

任何帮助将不胜感激。

Answer 1

为了实现这一点，你必须使用一种服务来存储登录数据的用户，成功登录后，将数据存储为userData，并在控制器中通过选中userData检查用户是否登录或登录，然后将showTab变量设置为true或false反之亦然，并在视图中使用此变量来显示或隐藏选项卡... 注意：不附加代码......

Answer 2

为此，创建三个不同的标志以显示和隐藏标签。并根据用户选择更新该标志的值。

例如，

为标题标记创建一个导航控制器。
在该控制器中创建三个不同的标志并为其分配默认值。 var displayLoginTab=true; var displayRegisterTab=false; displayMovieTab=false;

然后按上面的方式修改你的html

<header ng-controller="navigationController"> <ul class="nav nav-pills"> <li ng-if="displayMovieTab"><a href="#/movies">Movies</a></li> <li ng-if="displayLoginTab"><a href="#/login">Login</a></li> <li ng-if="displayRegisterTab"><a href="#/register">Register</a></li> </ul> </header>

因为我们为此使用单独的控制器，所以从其他控制器尝试访问导航控制器变量或从任何其他控制器更新变量并广播该更新。在navigationController中监听该广播事件并更新该变量值。

仅显示AngularJS

2 个答案: