根据单击按钮在 div 中渲染新视图 |AngularJS.

Question

嗨，我正在尝试根据单击导航栏中的按钮来呈现新视图。但是，它不起作用。

这是我的HTML代码：

            <!-- Links to all the pages with data entry forms -->
            <div id="data_links" ng-controller="MainCtrl">
                <ul>
                    <li>
                        <a href="#" title="Home Page" ng-click = "ChangeView('instructions')"> Home </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Modify views here -->
        <div class="main" ng-controller="MainCtrl">
            <main role="main">
                <div ng-view> <!-- Where we will inject html --> </div>
            </main>
        </div>
<!-- Application Files -->
<script src="js/app.js"></script>
<script src="js/controllers/main.js"></script>

这是我的应用程序.js：

angular.module('DataEntry', [
  'ngRoute'
]).config(function ( $routeProvider ) {
  $routeProvider
    .when('instructions', {
      templateUrl: 'views/instructions.html',
      controller: 'MainCtrl'
    });
});

这是我的控制器主.js：

angular.module('DataEntry')
  .controller('MainCtrl',
    function MainCtrl ( $scope, $location ) {
      'use strict';
      $scope.ChangeView = function(view) {
        alert(view);
        $location.url(view);
      }
    });

这是我的说明.html用于测试以查看它是否加载的页面：

<div class="module instructions">
    <div class="module_instructions">
        <h1> Testing Loaded! </h1>
        <p> Test <br> 
            Test <br> Test <br> Test 
        </p>
    </div>
</div>

我希望最终能够单击导航栏中的多个链接，例如主页、说明等，并在 ng-view 部分中呈现不同的视图。但是，它现在不起作用，我不确定如何缩放它，以便我可以为我要呈现的不同视图添加更多.html页面。有人可以帮助我前进吗？

Answer 1

此行 <a href="#" title="Home Page" ng-click = "ChangeView('instructions')"> Home

可以改为：

<a href="/instructions" title="Home Page"> Home </a>

您不需要使用控制器上的函数来设置 url，尽管您可以通过这种方式导航 - 有时您希望以编程方式重定向用户，这适用于这些情况。

此外，将href="#"留在该行中会给您带来问题。在非角度页面中，#用作href占位符，但在Angular href="#"实际上将被$routeProvider拾取，这将尝试更改ng-view容器的内容。加载的内容取决于您如何设置.config部分，但通常不是理想的行为。

当您创建更多页面时，将路径添加到.config部分，您可以从 html 链接到它们，就像我上面使用/instructions路径所做的那样。

下面是一个示例：

angular.module('DataEntry', ['ngRoute'])
.config(function ( $routeProvider ) {
  $routeProvider
   .when('instructions', {
      templateUrl: 'views/instructions.html',
      controller: 'MainCtrl'
   })
   .when('faq', {
      templateUrl: 'views/faq.html',
      controller: 'FaqCtrl'
   })
   .when('example', {
      templateUrl: 'views/example.html',
      controller: 'ExampleCtrl'
   })
});

在您的标记中：

<a href="/instructions" title="Home Page"> Home </a>

<a href="/faq" title="FAQ"> FAQ</a>

<a href="/example" title="Example Page"> Example</a>