How do you pass a value to a directive in AngularJs?

Question

How do I pass a value to a directive and display it in the template?

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.

The attribute value is being passed properly, as Sai mentioned below you just need to change your binding. AngularJS replaces dashes with camel casing. Also, just so you know, the directive has direct access to all of the attributes on the element the directive is associated with, either through the `link` or `compile` methods — jnthnjns, Apr 24 '14 at 16:39

Sai · Answer 1 · 2014-04-24T16:41:45.577

1

Change the following in your template

<script type="text/ng-template" id="select-block-type.html">
  <p>Block Id = **{{lrBlockId}}**</p>
</script>

edited Apr 24 '14 at 16:41

answered Apr 24 '14 at 16:30

Sai

2,068
19
24

score 1 · Accepted Answer · answered Apr 24 '14 at 16:33

1

here you go: http://plnkr.co/edit/i5FPqeDuCtTK5zqINtsV?p=preview

you are outputting the wrong thing it should be {{lrBlockId}}

answered Apr 24 '14 at 16:33

btm1

3,866
2
23
26

I'm currently using ng-repeat to output the blocks.
does not work but
– guyja Apr 24 '14 at 17:39

score 0 · Answer 3 · edited May 23 '17 at 12:20

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>

The template is working properly using the `` in the index.html page — jnthnjns, Apr 24 '14 at 16:35
I haven't seen templates defined in-line like that before; pretty cool. The problem was what the user was trying to output inside the template; and my modified template also works if created in-line. — JeffryHouser, Apr 24 '14 at 16:39

How do you pass a value to a directive in AngularJs?

3 Answers3