How to use passed data in a directive template?

Question

I created a reusable component with directive as follows:

app.directive("menu", function () {
    return {
        restrict: 'AE',
        templateUrl: '/menu.html',
        scope: {
            title: '=title'
        }
    };
});

menu.html:

<div>{{title}}</div>

Obviously I want to pass the title property from outside and show is in within the menu.html.

Usage in main.html:

<div menu title="test"></div>

Result: the lable is not resolved. Why?

try just using - title: '=' – mindparse Oct 30 '15 at 08:41 — mindparse, Oct 30 '15 at 08:41

score 3 · Accepted Answer · edited May 23 '17 at 12:03

3

You have to declare it this way :

app.directive("menu", function () {
    return {
        restrict: 'AE',
        templateUrl: '/menu.html',
        scope: {
            title: '@'
        }
    };
});


Text Binding    (Prefix: @)
One-way Binding (Prefix: &) (for functions)
Two-way Binding (Prefix: =)

This SO post goes more deep about @ vs =

edited May 23 '17 at 12:03

Community

1
1

answered Oct 30 '15 at 08:42

IggY

3,005
4
29
54

1

What's the difference when using `title: '@'` (which works) instead of `title: '='` (which does not work)? – membersound Oct 30 '15 at 08:43
@membersound added some info on my answer, I'll add the link to the angular doc as soon as i'll find it ;p – IggY Oct 30 '15 at 08:44
''@" means one way binding, "=" means two way binding – Suren Srapyan Oct 30 '15 at 08:45
@membersound I couldn't find the official angular documentation about it, I edited my answer with a SO post that explain it. Remembering `@ for text, = for variables, & for functions` will be enough in most easy cases :) – IggY Oct 30 '15 at 08:49

score 0 · Answer 2 · answered Oct 30 '15 at 08:44

There are three types of binding with directives:

"@" ( Text binding / one-way binding )
"=" ( Direct model binding / two-way binding )
"&" ( Behaviour binding / Method binding )

So in your case, if you only care about displaying the text you would use the '@' notation

How to use passed data in a directive template?

2 Answers2