1

I want to pass a string into an angular directive,

<person first-name="Don" last-name="Dood"></person>
<person first-name="James" last-name="Jawalla"></person>

and get this result HTML:

<p>Don Dood</p>
<p>James Jawalla</p>

Here is what I currently have.

Directive:

.directive('person', function(){
  return {
    scope: {
      firstName: '@',
      lastName: '@'
    },
    templateUrl: 'person-template.html'
  }
});

person-template.html

<p>{{ firstName }} {{ lastName }}</p>

However there are no values appearing for firstName or lastName. What am I missing?

It's a simple question, so I'm surprised there is no good answer on SO. Closest I found was this question, but it does not say how to show a string in HTML.

Improve this question
6
  • the problem: stackoverflow.com/questions/14050195 Commented Feb 3, 2015 at 10:12
  • use '=' instead of '@' Commented Feb 3, 2015 at 10:30
  • @pankajparkar, you mean like what I'm currently doing? Commented Feb 3, 2015 at 10:33
  • @DonnyP Yes you're right, it will do two way binding Commented Feb 3, 2015 at 10:37
  • 1
    '@' is the correct scope binding to use here Commented Feb 3, 2015 at 10:56

2 Answers 2

Reset to default
1

'@' is the correct scope binding to use here as strings are being passed to the directive.

I believe you're missing a restrict:'E' in your DDO, but other than that your code is fine.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks, I'll accept your answer - can you make a note in your answer that '@' is the correct symbol to use when passing strings in a directive? People are going to get confused when they see the other comments on this page that suggest using two-way data binding to other scope objects.
No. It's not correct. By default restrict is on 'EA' so the OP already stated the problem was somewhere else, so this is not doing anything...
@Bhojendra Nepal, the default restrict for 1.3+ is EA. For versions, 1.2 and below, the default restrict is 'A'. You should admit to the OP that you were wrong, and move on...
1

Nevermind, this code works. I had a bug elsewhere in my code that was making this seem not to work. Can't delete since it already has an answer.

A reminder: If you are passing a string as an attribute use the @ sign (as I do in the question). If you passing an object, variable, etc and you want it to be two-way binded, then use the = sign.

Improve this answer

4 Comments

You're wrong. Though you can delete your answer and question, I'll delete my answer...
@BhojendraNepal I believe your answer should up voted. because you replied as soon as question has been asked.
Thanks. But that's not what I'm here for. Just helping people in right way around...
I'm sorry @BhojendraNepal, but you made a suggestion to use two-way data binding with =. The question was to pass a string into the directive. For that you should use @, so your answer is wrong (although I appreciate the effort, I can't mark it as correct). Here is a reference to the SO question that states this as well stackoverflow.com/questions/14050195/….

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.