Question

我有导航栏的指令，我希望在登录时隐藏该指令，并在其余页面上显示相同的指令。

要隐藏/显示的HTML

 <div id="nav">
   <navigation></navigation>
 </div>

HTML with Body

<body ng-app="myapp" ng-cloak>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header" style="margin-right: 40px;">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" style="color: white;" href="#/">Test Service</a>
                </div>
                <div id="nav">
                    <navigation></navigation>
                </div>
            </div>
        </nav>
        <div class="container">
            <ng-view></ng-view>
        </div>
    </body>

指令

'use strict';

myapp.directive('navigation',
    function ($location, someservice) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'app/main/templates/Navigation.html',
            link: function (scope, element, attrs) {
                //some code
            },
            scope: {
            }
        };
    });

app.js

myapp.config(function ($routeProvider, $httpProvider, $compileProvider) {
     $routeProvider.when('/main',
     {
         templateUrl: 'app/main/Main.html',
         controller: 'MainController'
     });
     $routeProvider.when('/registration/add',
     {
         templateUrl: 'app/registration/AddRegistration.html',
         controller: 'AddRegistrationController'
     });
     $routeProvider.when('/login',
     {
         templateUrl: 'app/login/Login.html',
         controller: 'AuthenticationController'
     });
     $routeProvider.otherwise({ redirectTo: '/main' });
 })

Answer 1

您可以拥有顶级应用程序控制器：

<body ng-app="myapp" ng-controller="MyAppController" ng-cloak>
    ...
    <div id="nav" ng-show="navigation">
        <navigation></navigation>
    </div>
</body>

可以控制导航的可见性以及任何其他顶级内容：

angular.module("myapp")
    .controller("MyAppController", function($scope) {
        $scope.navigation = true; // default visibility state

        $scope.showNavigation = function(show) {
            $scope.navigation = show;
        };

        // other application-level things ...
    });

然后你可以在任何其他控制器中使用它来显示/隐藏导航：

angular.module("myapp")
    .controller("AuthenticationController", function($scope) {
        $scope.showNavigation(false);

        // ... the rest of you code         
    });

或

    angular.module("myapp")
    .controller("MainController", function($scope) {
        $scope.showNavigation(true);

        // ... the rest of you code         
    });

在登录页面和其余页面上隐藏/显示导航栏或指令

1 个答案: