Angular - 链接到 ngInclude 部分答案

【问题标题】：Angular - linking to a ngInclude partialAngular - 链接到 ngInclude 部分
【发布时间】：2014-06-14 13:57:56
【问题描述】：

我已按照有关设置 ngInclude 的文档进行操作（加载 HTML 部分）并在更改选择选项时更改部分。

$scope.templates = [
    { name: 'Overview', url: 'partials/project/overview.html' },
    { name: 'Tasks', url: 'partials/project/tasks.html' }
];
$scope.template = $scope.templates[0];

----

<div ng-controller="Tasks">
    <select ng-model="template" ng-options="t.name for t in templates">
        <option value="">(blank)</option>
    </select>

    <section ng-include="template.url"></section>
</div>

但是，我不想使用选择菜单进行导航。我想使用无序列表。我尝试使用ngHref，但这似乎不起作用。我找不到太多关于绑定元素以更改 ngInclude 部分的文档，但也许我正在寻找错误的东西。

任何关于我如何使用锚标签来更改点击时加载的部分的帮助都会很棒。

这是我正在玩的结构：

<ul class="header-menu">
    <li><a ng-modal="template" ng-href="{{template[0]}}" class="selected">Overview</a></li>
    <li><a ng-modal="template" ng-href="{{template[1]}}">Tasks</a></li>
</ul>

【问题讨论】：

AngularJS 核心中没有“ngModal”指令。
啊，是的，这是一个错字，我把它改成了ng-model。但这并不是说它有帮助:)

标签： javascript angularjs angularjs-directive angularjs-scope angularjs-ng-include

【解决方案1】：

您只需存储模板的路径，并根据列表中的操作进行更改。 ngHref 在这里不相关，因为它会加载模板本身，这不是您想要的。

看这个演示plunker:

HTML：

     <body ng-controller="MainCtrl">
      <ul>
      <li ng-repeat="template in templates">
      {{template.name}}
      <button ng-click="selectTemplate(template)">Go!</button>
      </li>
    </ul>
    {{selectedTemplate}}
    <div ng-include="selectedTemplate"></div>
  </body>

控制器：

    app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.templates=[{
    name:'First Template',
    url:'template1.html'
  }
  ,{
    name:'Second Template',
    url:'template2.html'
  }
  ]

  $scope.selectedTemplate=$scope.templates[0].url;
  $scope.selectTemplate=function(template){
    $scope.selectedTemplate=template.url;
  }
});

但我真的建议您查看ui-router，因为听起来您正在尝试实现一些选项卡系统，并更改您的应用程序的状态，而 ui-router 完美地做到了。

【讨论】：