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不是在角度应用程序中实现路由的最佳选择。

使用ngRoute，您可以使用指令ng-view将角度加载html / controllers / etc基于应用程序config()方法中指定/配置的路由到一些DOM元素中。当您单击<a>具有相应路径的ng-href时，或使用$location服务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执行的函数来更新src的{{1}}属性以加载基于模板的模板在点击元素上。我已更新plunker。

希望这有帮助！

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

1 个答案: