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.
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
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
Publication date 29-July-2014
Author santosh
Name Heading physics
Publication date 29-July-2014
Author santosh
Publication date 29-July-2014
Author santosh
No comments :
Post a Comment