CODEWITHSUNDEEP
angularjs
Ben
Ben

Reputation: 62434

How can I programmatically/dynamically change the view?

I'd like to have a "wizard" of sorts where the screen changes a few times during the process. I'd like to utiilze Angular's controllers for this. I can't however, figure out how to change the view that's being displayed programmatically.

It doesn't look like there's any kind of $scope.setView('/path/to/my/view.htm') I can define.

Upvotes: 3

Views: 2915

Answers (2)

Superhero
Superhero

Reputation: 21

document.location.href='#/yourRoute' to change the route programmatically

And if you want to use several views with 1 controller: define different routes with different views but the same controller

Upvotes: 2

Brian Petro
Brian Petro

Reputation: 1567

You are going to want to learn about ngView => http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngView

This way you can use $route to configure the display of partial content. You will want to declare the template option like:

$routeProvider.when('/path', {
  templateUrl: '/path/to/my/view.htm',
}

Another option is to use ngSwitch => http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngSwitch

For a wizard I would think that ngSwitch is less efficient but will be the easier of the two. This does sound like what you are looking for though.

"The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression."

Upvotes: 4

Related Questions