Javascript ngHide指令仅在页面刷新后适用于ngRoute模块

当我登录我的应用程序时，我希望登录和注册按钮从nav中消失，因此如果登录成功并且从服务器接收到令牌（我将其存储在cookie中），我将使用ng hide指令

Nav是index.html文件的一部分

因为我使用的是角度路由，当登录成功时，不会再次加载index.html，而是通过ng view指令呈现主页

问题是我必须刷新页面才能使ng hide正常工作。我假设这是因为ng hide是index.html页面的一部分，它不会被重新加载

希望有比每次有人登录时刷新页面更好的解决方案

下面是我的一些相关代码

HTML

<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#/">
                <i class="fa fa-play-circle"></i>  <span class="light">Webnar</span>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#about">Webinars</a>
                </li>
                <li ng-hide="token">
                    <a class="page-scroll" href="#/login">Login</a>
                </li>
                <li ng-show="token">
                    <a class="page-scroll " href="#/create">Add a webinar</a>
                </li>
                <li ng-hide="token">
                    <a class="page-scroll btn btn-default " href="#/signup">Sign Up</a>
                </li>
                <li ng-show="token" >
                  <a class="page-scroll btn btn-default" ng-click="logOut()">Logout</a>
                </li>

            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

---

您应该使用其他变量声明声明$scope.token。当您最初设置ng hide时，它不存在于作用域中

$scope.isDisabled = false; 
$scope.token;

---

您是否尝试过使用$scope.$apply（）

$scope.$apply（函数（）{
$scope.token=；
})

这是因为您将导航栏放在了索引页上。它不是路由模块加载的模板。因此，它与任何绑定到它的路由和控制器无关。路由中声明的控制器仅适用于路由模块加载的模板

要绑定控制器（无论路由是什么），请使用ng控制器指令。把它放在

元素上

注意：如果使用“作为控制器”语法，则必须在控制器中执行以下操作： 这是无效的 而不是 $scope.isDisabled

文件：

如果需要使用应用程序的其余部分将数据更新到该控制器。使用$rootScope。如果使用“ctrl-as”语法，则更容易： 这。$rootScope=$rootScope

如果您不喜欢此操作，请使用$watch监视更改并将currentValue重新绑定到控制器：

$rootScope.watch('myParameter', function(new){
     this.myParameter = new;
});

---

不要忘记在$ROOTSCOPE中初始化变量。或者，该变量最终将位于导航栏控制器不可见的子作用域中。

好的，我认为一种方法是为导航栏添加一个控制器，例如navbarController

    <nav ng-controller="navbarController">...</nav>

Inject $rootScope into both maincontroller and navbarController.

。。。
将$rootScope注入maincontroller和navbarController。

然后在mainController中，每当您需要更改令牌的值时，都要执行此操作

$rootScope.$emit('tokenValueChange', <value>);

then in navbarController add,

$rootScope.$on('tokenValueChange', function(newValue) {
    $scope.token = newValue;
})

I am not sure if this is a perfect method but this should work.

$rootScope.$emit（'tokenValueChange'，）；
然后在navbarController中添加，
$rootScope.$on（'tokenValueChange'，函数（newValue）{
$scope.token=newValue；
})
我不确定这是否是一个完美的方法，但这应该是可行的。

我遇到了与OP（维迪萨塞纳）类似的问题，并用他同样的方法解决了这个问题。和他一样，我在位于index.html的导航中有

ng hide

。我的

ng hide

在初始页面加载时工作正常，但当我尝试导航到其他视图时，我的

ng hide

在刷新页面之前无法工作

我的解决方案：与@viditsaxena在接受答案下的评论中所描述的方法相同（使用$rootScope而不是$scope），但我想我应该在这里放上我的实际代码，向您展示我是如何在我的app.js文件中使用它的：

我从此开始（导航离开原始视图后需要刷新才能加载）：

app.controller('routeController', ['$scope', '$location', function($scope, $location) {
    $scope.showPortfolioHeader = $location.path() === '/jcRealty';
}]);

app.controller('routeController', ['$rootScope', '$location', function($rootScope, $location) {
    $rootScope.showPortfolioHeader = $location.path() === '/jcRealty';
}]);

对此（现在我的ng隐藏在离开第一个视图后不需要刷新）：

app.controller('routeController', ['$scope', '$location', function($scope, $location) {
    $scope.showPortfolioHeader = $location.path() === '/jcRealty';
}]);

app.controller('routeController', ['$rootScope', '$location', function($rootScope, $location) {
    $rootScope.showPortfolioHeader = $location.path() === '/jcRealty';
}]);

---

这个被接受的答案让我了解了一部分，但我很难理解他回答中的一些语法。我自己的测试证实了他说的一些话。上面的My controller（

routeController

）与位于/jRealty路径的视图相关。如果我将我的

ng hide

s放在jcRealty视图中，它们可以使用

$scope

正常工作（无需刷新）。但是由于我的

ng hide

位于index.html上，在该控制器的路径之外，需要

$rootScope

来不需要重新加载页面

使用ng if如何？如果用户界面中的$scope.variable不起作用，请在成功登录时提供$scope.variable并将其提供给ng，而不是ng hide和ng-show.On。@ViditSaxena:请创建一个plunkr并提供usDidn not work。不过谢谢，我本来应该这么做的。我确实这么做了，但它说digest循环已经在进行中了。这是正确的，因为我从来没有脱离过角度。谢谢，把index.html制作成？？？怎么样？坏主意，你有一条ng路线，就是和一个身体的孩子一起做他的事情。最好将导航栏控制器与路由使用的控制器分开。如果您只有一个控制器，正如演示代码所示，您可以，但我绝对不建议将其用于真正的应用程序，我甚至不知道这是否可行。谢谢！！甚至我也不确定它是否会起作用。但这只是一个想法。我已经将body元素绑定到了ng controller=“mainController”，但这不起作用。因此，我将通过@walfrat尝试这个解决方案，以使上述方法有效。我在包含导航栏的body元素标记上使用了mainController。我没有将令牌存储在$scope中，而是将其存储在$rootscope中@walrat-我的问题是当我刷新页面时它是如何工作的？那么在mainController中是令牌值吗？