How do change template dynamically in angularjs

Question

For example I have 10 template for preview.. see this following example where user comes and enters his/her details and can see live preview.

http://plnkr.co/edit/KNNLPF2Inr3IW2GaRI86?p=preview

// Code goes here
var app = angular.module("myApp", []);

As well as he/she can change template by select template name from available template from select box.

As far I know this can be achieved using angularjs custom directives. But I don't know how to achieve this.

How can be achieved this?

it's like invitation maker site, where user comes and enter his details then he can able to see his data in live preview with default template. But site has hundred's of template with different design. Now user can able to preview his data with different design by choosing the template from select box... — muni
– muni, Commented Jan 31, 2015 at 11:26
@muni you can use ng-include="template" template name will changed on basis of condition.. — Pankaj Parkar
– Pankaj Parkar, Commented Jan 31, 2015 at 11:54

Bardh Lohaj · Accepted Answer · 2015-01-31 12:08:17Z

3

Here is the solution: Plunker.

Using <ng-include src="view"> </ng-include> you can include a template.
When the data on the select control is changed, you can change the view variable $scope.view = "x.y.z"; or you can bind the variable of the ng-include with data-ng-model.

answered Jan 31, 2015 at 12:08

Bardh Lohaj

1,4101 gold badge9 silver badges17 bronze badges

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

2 Comments

muni Over a year ago

super... I like to know Is this efficient than doing this via custom directive?... Also it will great if you any example this done with the help of custom directive

Bardh Lohaj Over a year ago

while there are the angularjs directives for implementing the functionality that you are trying to, imo there is no need to go for custom directives unless you don't trust angularjs as much as your self.

Collectives™ on Stack Overflow

How do change template dynamically in angularjs

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related