Question

我已经按照有关设置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>

Answer 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完美地做到了。

Angular - 链接到ngInclude partial

1 个答案: