Wondering Coder Wondering Coder - 10 months ago 46
AngularJS Question

Dynamically change the content of the div using anchor tags angular

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>


<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>


Perhaps you are trying to do something as below:


<!-- 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>


$scope.selectedTemplate = {