基于元素的href使用ng-include渲染div内的页面内容？

Question

如果我有两个列表项

<li><a href="foo.html"></a></li>
<li><a href="bar.html"></a></li>

并基于单击哪个，使用 ng-include 在当前页面上的 div 中呈现？

<div ng-controller="main-panel" class="main-panel">
    <ng-include src="'clickedElement'"></ng-include>
</div>

我很困惑如何使用路由在 div 内渲染 html，这取决于您单击哪个元素？

main.config(function ($routeProvider, $locationProvider, $httpProvider) {

$routeProvider
  .when('/', {
    controller: 'side-menu'
   })

  .when('/signup', {
    templateUrl : 'signup.html',
    controller: 'main-panel'
   });

 $locationProvider.html5Mode(true);
});

HTML

<li ng-repeat="oucampus in secondaryLinks.oucampus">
  <a ng-href='{{oucampus.href}}'> {{oucampus.title}} </a>
</li>
<div class="main-panel" ng-view></div>

控制器功能

oucampus: [
        {title: "Requests", href:"signup.html"},
    ],

Plunker

Answer 1

如果您尝试基于路由呈现 HTML 内容，您可能需要使用路由服务，例如 ngRoute 或 ui-router。 ng-include 不是在 Angular 应用程序中实现路由的最佳选择。

使用ngRoute，您可以使用指令ng-view 根据您的应用程序config() 方法中指定/配置的路由将html/controllers/etc 角加载到某个DOM 元素中。当您单击具有相应路径的ng-href 的<a> 或使用$location 服务path() 方法以编程方式在控制器中使用path() 方法时触发此事件。

路由配置：

app.config(function($routeProvider) {
  $routeProvider
    .when('/foo', {
      templateUrl: 'foo.html',
      controller: 'FooController'
    })
    .when('/bar', {
      templateUrl: 'bar.html',
      controller: 'BarController'
    });
});

HTML：

<ul>
    <li><a ng-href="#/foo">foo</a></li>
    <li><a ng-href="#/bar">bar</a></li>
</ul>

<div ng-view></div>

这是一个plunker 演示基本路由的功能，包括基于特定路由加载特定控制器和 HTML 模板。

ng-包括 如果您绝对需要使用ng-include，您可以使用通过附加到$scope 或controllerAs 的ng-click 执行的函数来更新ng-include 的src 属性以加载基于点击元素的模板。我已经更新了plunker。

希望这会有所帮助！