根据按钮的点击在 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>

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

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

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

当您创建更多页面时，将路径添加到您的 .config 部分，您可以从 html link 到它们，就像我上面对 [=19] 所做的一样=]路径。

这是一个例子：

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>

根据按钮的点击在 Div 内呈现新视图 | AngularJS

Render New Views Within a Div Based on Click of Button | AngularJS

html

javascript

webpage

angularjs

single-page-application