3

I'm having a problem on how to load a dynamic view using Angularjs in anchor tags. By the way I can't use ng-view since ng-view can only be use once in a template. So I'm thinking of using the ng-src but on the sample docs it is using a select element tag and fetching its values to the controllers. What I want is when I click a link say the View1, the content of my div will change. I will explain further.

Say I have this 3 anchor tags

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

Before

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

Now when I click #/view1

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

2 回答 2

6

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

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"
};
于 2013-08-14T09:44:21.260 回答
1

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

要基于主 ng-view 加载其他部分视图，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.
});
于 2013-08-14T09:49:12.800 回答