Reputation: 917
How do I pass a value to a directive and display it in the template?
http://plnkr.co/edit/1uFEBi?p=preview
Ultimately, I'm creating an application that allows users to create, edit, and delete things. I need to be able to pass the ids of things around for this to work. I'm not sure what the angular way of doing this is. The plunk is my attempt but its not working.
Any help is greatly appreciated. Thank you.
Upvotes: 0
Views: 66
Reputation: 2068
Change the following in your template
<script type="text/ng-template" id="select-block-type.html">
<p>Block Id = **{{lrBlockId}}**</p>
</script>
Upvotes: 1
Reputation: 39408
I didn't see the template in the actual plunker. But, I believe it was having issues because the tempalte could not be found. Here is an updated plunker that works.
I use some JavaScript magic to create a dynamic path to the directive's template:
var scripts = document.getElementsByTagName("script");
var currentScriptPath = scripts[scripts.length-1].src;
var app = angular.module('LaunchRockApp', []);
app.controller("MainController", function($scope){});
app.directive('selectBlock', function(){
return {
scope: {
lrBlockId: '='
},
templateUrl: currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1) + 'select-block-type.html',
};
});
And I also added a select-block-type.html file:
Template
{{lrBlockId}}
I didn't notice the in-line template. In that case, just modify it like I did above by removing the '-' inside the variable you want to output:
<script type="text/ng-template" id="select-block-type.html">
<p>Block Id = {{lrBlockId}}</p>
</script>
Upvotes: 0
Reputation: 3856
here you go: http://plnkr.co/edit/i5FPqeDuCtTK5zqINtsV?p=preview
you are outputting the wrong thing it should be {{lrBlockId}}
Upvotes: 1