Question

我在如何使用锚标记中的Angularjs加载动态视图时遇到问题。顺便说一下，我不能使用ng-view，因为ng-view只能在模板中使用一次。所以我考虑使用ng-src，但是在示例文档中，它使用了一个select元素标记并将其值提取给控制器。我想要的是当我点击一个链接说View1时，我的div的内容会改变。我会进一步解释。

说我有这3个锚标记

<li><a href="#/view1">View1</a></li>
<li><a href="#/view2">View2</a></li>
<li><a href="#/view3">View3</a></li>

在

 <div data-ng-include="" data-ng-src="default.html"></div>

现在点击＃/ view1

 //the ng-src of the html will change depending on the link clicked
 <div data-ng-include="" data-ng-src="view1.html"></div>

Answer 1

也许您正在尝试执行以下操作：

<强> HTML：

<!-- Dont use # in the hrefs to stop the template from reloading -->
<li><a href="" ng-click="selectedTemplate.path = 'view1.html'">View1</a></li>
<li><a href="" ng-click="selectedTemplate.path = 'view2.html'">View2</a></li>
<li><a href="" ng-click="selectedTemplate.path = 'view3.html'">View3</a></li>

<div data-ng-include="selectedTemplate.path"></div>

<强> JS：

$scope.selectedTemplate = {
    "path":"view1.html"
};

Answer 2

ng-view是任何Angular应用程序的主视图，并受路由更改的影响。因此，所有锚标记只会影响ng-view模板。

要根据主要ng视图加载其他部分视图，ng-include是您已经提到的正确方法。

要根据主视图加载视图（在ng-view中显示视图），您需要编写映射逻辑，这取决于主视图应加载其他部分（ng-include页面元素）。

所以你的部分变得像

<div data-ng-include='templateNameVariable'></div>

只要ng-view在位置发生变化时，就必须设置此变量。

您可以观看$route $routeChangeSuccess事件，并根据有效路线更改templateNameVariable（因此视图）。

所以应该有一个控制器在ng-view指令的外面，它将编排这个，你会这样做

$scope.$on('$routeChangeSuccess',function(event,current,previous) {
     //Change the templateNameVariable to point to correct template here, based on current route.
});

使用锚标签角度动态更改div的内容

2 个答案: