Angular JS load view2.html from view1.html

Question

I have a simple angular JS app in which there is a main container html view page, a left menu for navigation between views.

 //Left panel menu links
 <li><a href ng-click="vm.showPanel('View1')">View1</a></li>
 <li><a href ng-click="vm.showPanel('View2')">View2</a></li>
 <li><a href ng-click="vm.showPanel('View3')">View3</a></li>
  //JS function to load view
  vm.showPanel = function (panelName) {

hideAllPanels();

if (panelName == 'View1') {
        vm.isView1Visible = true;
   }
}

The above is working fine, now what I want to do is add a button in View1.html called "Next" which will load next view that is view2.html & so on. Please note both view1.html % view2.html are within a container html page. Can anyone show me what is the angular way of doing this?

Regards

Pankaj Parkar · Accepted Answer · 2015-03-21 18:33:51Z

1

Maintain one variable which contains Views html list, like below, and that can be render it by using ng-repeat

Controller

$scope.viewList = ['View1','View2','View3'];

HTML

 <li><a href ng-repeat="view in viewList" ng-click="vm.showPanel(view )">Next</a></li>

More elegant solution would be to re implement you whole show tab and hide tab logic using ui-router or angular-route as it looks like pure SPA thing.

Plunkr for Angular Route

Plunkr for Angular UI-Router

edited Mar 21, 2015 at 18:33

answered Mar 21, 2015 at 18:27

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Max Over a year ago

Thanks that works nice, is it possible to call the parent page JS function from child page something like $scope.$parent.hideAllPanels().

Pankaj Parkar Over a year ago

@Max surely you can always call parent scope function using $scope.$parent

Max Over a year ago

Hi Pankaj, I am able to get the properties defined in parent scope but when I try to call a parent JS funtions "$scope.$parent.hideAllPanels();", I get a "undefined is not a function" error.

Pankaj Parkar Over a year ago

That means you parent scope doesn't contain hideAllPanels method,

Collectives™ on Stack Overflow

Angular JS load view2.html from view1.html

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related