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>

这是我的app.js：

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

这是我的控制器main.js：

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

这是我的instructions.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>

您无需使用控制器上的功能来设置网址，但您可以通过这种方式导航 - 有时您希望以编程方式重定向用户，这适用于这些情况。

此外，将href="#"留在该行会导致您遇到问题。在非角度页面中，＃用作href占位符，但是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>

基于Button的点击在Div中渲染新视图AngularJS

1 个答案: