In this tutorial, I am going to improvise the directive which we have written in the previous tutorial.
app.directive('carDetails',function(){ return{ template:'<div>My Car</div>' } });If you see the above code, we have an attribute template which is responsible for rendering the My Car string inside the div over the browser. Great, what will happen if our html content becomes bigger? Well Angular provides an unique way of downloading a template during the directive rendering using a feature called “templateUrl”. If we pass a html template file url in the place of the templateUrl this will get magically loaded when the DOM gets loaded and the directive gets initialized. To do that first we need to create an html template. Lets create an html file called cardetails.html under templates folder and add the code below.
cardetails.html
<div>My Car</div>
Wow, this html does not need the usual <html>,<body> script tags as this template is a partial template which will get added inside your index.html in the place of the <car-details></car-details> tag. So changing the directive like below
app.directive('carDetails',function(){ return{ templateUrl:'templates/cardetails.html' } });So this will give the same output like the previous but with an advantage of html templates being isolated in to a separate file. Now we will go and change the cardetails.html like the below to accommodate an image and its title like below.
Now please go and create a folder for holding your images, lets call that as Assets folder. Place an image inside that and change the contents of carDetails.html like below
<div> <img src="assets/img.png" ></img> <div>Image Title</div> </div>
Now you should be able to see the image and its title here but all are hard coded. Now we need to think of how to pass values to our component/directive. In our index.html we are simply calling our custom directive like
<body ng-app="appViewer"> <car-details></car-details> <car-details></car-details> <car-details></car-details> <car-details></car-details> </body>
And I see five same images with same title but I don’t want this. I want to pass some parameters to my directive like
app.directive('carDetails',function(){ return{ templateUrl:'templates/cardetails.html', scope:{ src:'@', title:'@' } } });In above code we have introduced one more attribute called scope, since we defined scope in our directive definition this directive will now have an isolated scope which is specific to this directive’s instance alone and not shared by rest of the components. This scope’s variables src and title will now be accessible in the carDetails.html. Before going there we need to see how we can pass these scope values form the mark up to this JS. Well that’s very simple
<car-details src="assets/img.png" title="New Image title"></car-details>
Now in your index.html you need to add the above code and you will be seeing the output like below
Leave a Reply