Question

我在索引页面中有一个按钮列表。

每个按钮都有一个按钮点击事件。

当我点击按钮时，我需要加载视图

我的index.html中有一个ng-view部分，需要在点击按钮

时加载新的视图模板

请在下面找到代码：

<div class="container ">
  <div class="panel panel-primary ">
    <div class="panel-heading" style="padding-bottom: 18px;">
    </div>
    <div class="panel-body" style="height: 100%;">
      <table>
        <tr>
          <td style="width: 22%;">
            <div class="btn-group" ng-controller="MainContoller">
              <h4 style="color: blue; font-family: 'Comic Sans MS'; text-align: center;">Demos</h4>
              <br />
              <button type="button" class="btn btn-primary">Traditional</button>
              <button type="button" ng-click="ChangeView()" class="btn btn-primary">1-Way Data Binding</button>
              <button type="button" class="btn btn-primary">2-Way Data Binding</button>
            </div>
          </td>
          <td rowspan="10" style="text-align: center; vertical-align: middle;">
            <div style="border-style: solid; border-width: thin; border-color: aquamarine; vertical-align: middle;" ng-view="">
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

控制器

DemoControllers.controller('MainContoller', function ($scope, $location) {
    $scope.ChangeView = function () {
        $location.url('1WayDataBinding');
    }
});

当我点击按钮时，它会点击主控制器并调用Chage视图功能，但它没有在ng-view部分加载视图1WayDataBinding.html

请建议我出错的地方

Answer 1

您错过了添加routing configuration，如下所示。请添加以下内容并进行检查。

DemoControllers.config(function($routeProvider) {
  $routeProvider.when('/1WayDataBinding', {
    templateUrl: '1WayDataBinding.html'
  });
});

如何使用ng-view在单击按钮时加载新视图模板

1 个答案: