AngularJS 1.6点击菜单项时显示/隐藏区块的实现方法

Hey there! Since you're new to AngularJS, let's break this down into two straightforward solutions based on your needs—one for simple show/hide on the same page, and another using AngularJS routing (since your links already use the #!/ pattern).

Option 1: Simple Show/Hide with ng-click & ng-show #

This is great if all your content sections live on the same page and you just want to toggle their visibility.

Step 1: Update Your Navigation HTML #

Add ng-click directives to each menu item to trigger a function that sets the active section:

<div class="header-inner"> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-md-12 col-sm-12 col-xs-12"> 
        <div class="nav-area"> 
          <nav class="mainmenu"> 
            <div class="collapse navbar-collapse"> 
              <ul class="nav navbar-nav"> 
                <li><a href="#" ng-click="setActiveSection('link1')">Link 1</a></li> 
                <li><a href="#" ng-click="setActiveSection('link2')">Link 2</a></li> 
                <li><a href="#" ng-click="setActiveSection('link3')">Link 3...</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

Step 2: Add Your Content Sections #

Use ng-show to conditionally display each section based on the active section variable:

<!-- Link 1 Content -->
<div ng-show="activeSection === 'link1'">
  <h2>Link 1 Section</h2>
  <p>All your Link 1 content goes right here!</p>
</div>

<!-- Link 2 Content -->
<div ng-show="activeSection === 'link2'">
  <h2>Link 2 Section</h2>
  <p>Here's where you put your Link 2 content.</p>
</div>

<!-- Link 3 Content -->
<div ng-show="activeSection === 'link3'">
  <h2>Link 3 Section</h2>
  <p>Link 3's content lives in this block.</p>
</div>

Step 3: Create the Controller #

Define a controller to manage the active section state:

// Initialize your AngularJS app
angular.module('myApp', [])
  .controller('NavController', function($scope) {
    // Set default active section (starts with Link 1 visible)
    $scope.activeSection = 'link1';

    // Function to update active section when a menu item is clicked
    $scope.setActiveSection = function(sectionName) {
      $scope.activeSection = sectionName;
    };
  });

Don't Forget! #

Make sure to add ng-app="myApp" to your root HTML element (like <html> or <body>) and ng-controller="NavController" to a parent element of both the navigation and content sections.

Option 2: Use AngularJS Routing (For Larger Apps) #

If you're building a more complex app where each section is a separate page/template, AngularJS routing (with ngRoute) is the way to go—this matches the #!/ pattern in your original links.

Step 1: Update Navigation & Add ng-view #

Keep your original links and add a ng-view container where your templates will load:

<div class="header-inner"> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-md-12 col-sm-12 col-xs-12"> 
        <div class="nav-area"> 
          <nav class="mainmenu"> 
            <div class="collapse navbar-collapse"> 
              <ul class="nav navbar-nav"> 
                <li><a href="#!/link1">Link 1</a></li> 
                <li><a href="#!/link2">Link 2</a></li> 
                <li><a href="#!/link3">Link 3...</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- This is where your template content will render -->
<div ng-view></div>

Step 2: Configure Routes #

First, make sure you've included the angular-route.js script (it's a separate file from core AngularJS). Then set up your route configuration:

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      // Route for Link 1
      .when('/link1', {
        templateUrl: 'link1.html', // Path to your Link 1 template file
        controller: 'Link1Controller' // Optional: Controller for this route
      })
      // Route for Link 2
      .when('/link2', {
        templateUrl: 'link2.html',
        controller: 'Link2Controller'
      })
      // Route for Link 3
      .when('/link3', {
        templateUrl: 'link3.html',
        controller: 'Link3Controller'
      })
      // Default route if no match is found
      .otherwise({
        redirectTo: '/link1'
      });
  })
  // Example controllers (customize as needed)
  .controller('Link1Controller', function($scope) {
    // Add Link 1 specific logic here
  })
  .controller('Link2Controller', function($scope) {
    // Add Link 2 specific logic here
  })
  .controller('Link3Controller', function($scope) {
    // Add Link 3 specific logic here
  });

Step 3: Create Template Files #

Make sure you have separate HTML files for each section (like link1.html, link2.html), each containing the content for that route. For example, link1.html:

<h2>Link 1 Template</h2>
<p>This content loads from link1.html when you click Link 1.</p>

Choose the option that fits your app size and structure—both will work perfectly for your navigation needs!

内容的提问来源于stack exchange，提问作者Giacomo