Question

我目前正在开发一个使用AngularJS的应用程序。我们使用的index.html文件显示在每个页面上，有一个页面不应该显示。如何隐藏index.html文件以显示在特定页面上？非常感谢任何建议/答案

修改

这是我想删除的模板：

    <!doctype html>
<html lang="en" ng-app="agentSupportApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

    <script src="js/lib/jquery/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="css/app/fonts.css">
    <!-- things related to bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/lib/bootstrap/bootstrap.js"></script>

    <!-- things related to angular -->
    <script src="js/lib/angular/angular.js"></script>
    <script src="js/lib/angular/angular-resource.js"></script>
    <script src="js/lib/angular/angular-route.js"></script>
    <script src="js/lib/angular/angular-sanitize.js"></script>

    <!-- bootstrap lib for angular -->
    <script src="js/lib/bootstrap/angular/ui-bootstrap-tpls-0.11.0.js"></script>

    <!-- things related to internationalization -->
    <script src="js/lib/i18next/i18next-1.7.1.js"></script>
    <script src="js/lib/ng-i18next/ng-i18next.js"></script>

    <!-- application related files -->
    <link rel="stylesheet" type="text/css" href="css/app/main.css">
    <link rel="stylesheet" type="text/css" href="css/app/error.css">
    <link rel="stylesheet" type="text/css" href="css/app/customer_info.css">

    <script src="js/app/app.js"></script>
    <script src="js/app/config.js"></script>

    <script src="js/app/factories.js"></script>

    <!--directives go here -->
    <script src="js/app/directives/active-menu.js"></script>
    <!-- Services go here-->
    <script src="js/app/services/rest_service.js"></script>

    <!-- Controllers go here -->
    <script src="js/app/controllers/error-controller.js"></script>
    <script src="js/app/controllers/lang-controller.js"></script>
    <script src="js/app/controllers/user-controller.js"></script>
    <script src="js/app/controllers/nav-controller.js"></script>

    <!-- screen specific contollers go here-->
    <script src="js/app/controllers/drive-controller.js"></script>
    <script src="js/app/controllers/drive-user-controller.js"></script>

</head>
<body>
    <div class="container">
        <div class="header">
            <div ng-include src="'views/common/topbar.html'"/>
        </div>
        <div class="row view-margin">
            <div ng-view="" >
            </div>
        </div>
        <div class="footer navbar-fixed-bottom">
            <div ng-include src="'views/common/footer.html'"/>
        </div>

    </div> <!-- container -->
</body>
</html>

app.js文件：

  (function(){
"use strict";

var agentSupportApp = angular.module('agentSupportApp',[
    'ngRoute',
    'ngSanitize',
    'ngResource',
    'subscriptionControllers',
    'jm.i18next',
    'ui.bootstrap'
    ]);

/**
* CONTROLLER Modules are defined here
*/
angular.module('subscriptionControllers',[]);

/****END OF CONTROLLERS****/

agentSupportApp.run(['$rootScope',function($rootScope){
    $rootScope.version = '1.0';
    /*$rootScope.$on('$locationChangeSuccess', function(){
        console.log('Event fired');
    });*/
}]);

/* Routing mapping to fetch a particular template when wanted*/
agentSupportApp.config(['$routeProvider',function($routeProvider){
    $routeProvider.
    //USED
    when('/error',{templateUrl:'views/common/error.html', controller:'MessageController'}).
    when('/dashboard',{templateUrl:'views/dashboard.html'}).
    when('/drive',{templateUrl:'views/drive_support.html', controller:'DriveController'}).
    when('/userdetail',{templateUrl:'views/drive_user_detail.html', controller:'DriveUserController'}).
    otherwise({redirectTo:'/dashboard'});
}]);

}());

Answer 1

使用$ location获取Route Url

使用$ location和ng-hide / ng-show的组合，您可以隐藏页面。

例如：假设url是存储URL值的变量。你可以使用

<div ng-hide="url==<URL WHERE YOU WANT TO HIDE THE HTML>">
</div>

在AngularJS中隐藏模板ng-view

1 个答案: