2

I would like to have a different template based on my scope.

Currently, I have only one template named : view-project.html accessible by this url : #/project/:id.

Now, I need two templates : view-project-1.html and view-project-2.html. and I need them to keep the same url : #/project/:id

So for example, if my $scope.template = 1, I would like to use view-project-1.html with this url #/project/300. And if $scope.template = 2 I would like to use view-project-2.html with this url #/project/300

Is it possible to do that ?

Steffi
  • 6,835
  • 25
  • 78
  • 123

2 Answers2

2
app.config(function($routeProvider) {
    $routeProvider
        .when('/project/:id', {
            templateUrl: 'template.html',
            controller: 'projectcontroller'
        })
});

Then in your controller:

app.controller('projectcontroller', function($scope) {
    $scope.template = 2;
});

template.html:

<div ng-include="template==2?'view-project-2.html':'view-project-1.html'"></div>

DEMO PLUNKER

Raghavendra
  • 5,281
  • 4
  • 36
  • 51
1

This, according to me, can be done in the following way :

  1. Use ng-include to import both of your templates in the same file.

  2. You can use ng-switch or ng-if to render one of the two templates based on the values in the route parameters.

Manish Kr. Shukla
  • 4,447
  • 1
  • 20
  • 35