Wednesday, August 6, 2014

AngularJs -Directive with Template and TemplateUrl

Directive example here is kind of Widget that is reused . Example of book widget

View

<html data-ng-app="app" id="ng-app" lang="sv">

<div data-ng-controller="ControllerWithScope">

<my-books book="maths"></my-books>

<my-books book="science"></my-books>

</div>
 
Controller and directive:

Here if we use template: "put html element"
if we use templateUrl: provide url

Very Very important:
app.directive('myBooks', function () {
Here 'myBooks' is case sensitive ..it will fail if used mybooks.

 
 

 
 

Template:
Create one template html file say mybooks.html and place it under template folder.

<div id="panel panel-default">

<p class="panel-heading" >

Name Heading {{book.name}}

</p>

<div class="panel-body">

<p>Publication date {{book.dateOfPublication}}</p>

<p>Author {{book.author}}</p>

</div>

</div>

Output
Name Heading geometry
Publication date 29-July-2014
Author santosh
 
Name Heading physics
Publication date 29-July-2014
Author santosh


 

No comments :