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

Question

当我登录我的应用程序时，我希望登录和注册按钮从导航中消失，所以如果登录成功并且从服务器接收到令牌，我将使用 ng-hide 指令，我存储在饼干。

Nav 是 index.html 文件的一部分。

因为我使用的是angular路由，登录成功后，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>

App.js

var webinarApp = angular.module('webinarApp', ['ngCookies', 'ngRoute']);

webinarApp.config(function($routeProvider){

    $routeProvider

    .when('/', {
      templateUrl: './home.html',
      controller: 'mainController'
    })
    .when('/signup', {
      templateUrl: './signup.html',
      controller: 'mainController'
    })
    .when('/login', {
      templateUrl: './login.html',
      controller: 'mainController'
    })
    .when('/create', {
      templateUrl: './create.html',
      controller: 'mainController'
    })
});

webinarApp.controller('mainController', ['$scope', '$http', '$cookies', '$location', function($scope, $http, $cookies, $location){

  $scope.welcomeMessage = '';
  $scope.users = [];
  $scope.searchQuery = "";
  $scope.orderByField = 'name';
  $scope.newUser = {};
  $scope.logInUser = {};
  $scope.webinars = [];
  $scope.newWebinar = {};
  $scope.isDisabled = false;


  // ============== Users ================

  $scope.getUsers = function(){
    $http.get('/api/users').then(function(response){
      $scope.users = response.data;
    });
  };
  $scope.getUsers();

  $scope.createUser = function(){
    $http.post('/api/users', $scope.newUser).then(function(response){
      console.log(response.data)
      $scope.users.push(response.data);
      $scope.newUser = {};
      $location.path('/login');
    });
  };

  $scope.obtainToken = function(){
    $http.post("/api/users/authentication_token", $scope.logInUser).then(function(reponse){
      $scope.token = reponse.data.token;
      console.log($scope.token);
      $cookies.put('token', $scope.token);
      $location.path('/')
    });
  };

Answer 1

您应该将 $scope.token 与其他变量声明一起声明。当您最初设置 ng-hide 时，它不存在于范围内。

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

Answer 2

您尝试过使用 $scope.$apply() 吗？？？

  $scope.$apply(function() {
    $scope.token = <whatever value>;
  })

Answer 3

这是因为你把导航栏放在了索引页上。它不是由路由模块加载的模板。所以它与任何与之绑定的路由和控制器无关。路由中声明的控制器只适用于路由模块加载的模板。

无论路由是什么，要绑定控制器，请使用 ng-controller 指令。把它放在你的 <nav> 元素上

请注意，如果您使用 "as controller" 语法，则必须在控制器中执行： this.isDisabled 代替 $scope.isDisabled

文档：https://docs.angularjs.org/#!/api/ng/directive/ngController

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

如果您不喜欢这个，请使用 $watch 来观察变化并将 currentValue 重新绑定到控制器：

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

并且不要忘记初始化 $ROOTSCOPE 中的变量。或者该变量将最终出现在您的导航栏控制器不可见的子范围内。

Answer 4

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

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

Inject $rootScope into both maincontroller and 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.

Answer 5

我遇到了与 OP (viditsaxena) 类似的问题，并按照他的方式解决了。像他一样，我的导航栏中有 ng-hide，它位于 index.html。我的 ng-hide 在初始页面加载时工作正常，但是当我尝试导航到不同的视图时，我的 ng-hide 将无法工作，直到我刷新页面。

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

我从这里开始（在我离开原始视图后，ng-hide 需要刷新才能加载）：

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

为此（现在我的 ng-hides 在我离开第一个视图后不需要刷新）：

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

接受的答案让我完成了部分工作，但我很难理解他回复中的一些语法。我自己的测试证实了他所说的一些内容。我上面的控制器 (routeController) 与位于 /jcRealty 路径的视图相关。如果我将我的 ng-hide 放在我的 jcRealty 视图中，它们使用 $scope 可以正常工作（不需要刷新）。但是由于我的 ng-hide 在 index.html 上，在该控制器的路径之外，因此需要 $rootScope 才能不需要重新加载页面。

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

ngHide directive only works with ngRoute module after page refresh

html

javascript

angularjs

ng-hide

ngroute