Wednesday, August 6, 2014

AngularJs -Directive with Template and TemplateUrl

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


<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>

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 will fail if used mybooks.



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 {{}}


<div class="panel-body">

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

<p>Author {{}}</p>



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

Post a Comment