CODEWITHSUNDEEP
angularjsangularjs-directive
guyja
guyja

Reputation: 917

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

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

Answers (3)

Sai
Sai

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

JeffryHouser
JeffryHouser

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

btm1
btm1

Reputation: 3856

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

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

Upvotes: 1

Related Questions