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.

Community
  • 1
  • 1
Don P
  • 60,113
  • 114
  • 300
  • 432

2 Answers2

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.

Don P
  • 60,113
  • 114
  • 300
  • 432
  • 1
    You're wrong. Though you can delete your answer and question, I'll delete my answer... – Bhojendra Rauniyar Feb 03 '15 at 10:37
  • @BhojendraNepal I believe your answer should up voted. because you replied as soon as question has been asked. – Pankaj Parkar Feb 03 '15 at 10:44
  • 1
    Thanks. But that's not what I'm here for. Just helping people in right way around... – Bhojendra Rauniyar Feb 03 '15 at 10:45
  • 1
    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 http://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope. – Don P Feb 03 '15 at 10:56
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.

Michael Kang
  • 52,003
  • 16
  • 103
  • 135
  • 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. – Don P Feb 03 '15 at 10:59
  • 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 Rauniyar Feb 03 '15 at 14:00
  • @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... – Michael Kang Feb 03 '15 at 15:51