How to pass values to an angularjs directive?

Question

I have a directive that I want to pass a value, but it does not work:

<p>{{testvar}}</p>
<my-fn info="{{testvar}}"></my-fn>

app.directive('myFn', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/my-fn.html',
        scope: {
            info: "=info"
        }
    };
});

my-fn.html:

<p>the value is: {{info}}</p>

Result: The value in <p> tag is shown correctly, but the my-fn directive is not shown and prints the following error in the console:

Error: [$parse:syntax] http://errors.angularjs.org/1.4.3/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Btestvar%7D
J/<@http://code.angularjs.org/1.4.3/angular.min.js:6:416

membersound · Accepted Answer · 2015-10-06 08:32:40Z

2

To answer my own question: one has to neglect the curly brakets as follows:

<my-fn info="testvar"></my-fn>

If anyone knows why, please comment below.

answered Oct 6, 2015 at 8:32

membersound

87.8k222 gold badges687 silver badges1.2k bronze badges

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

1 Comment

Luis Sieira Over a year ago

Check all this stuff: reddit.com/r/angularjs/comments/2e1h35/…

Collectives™ on Stack Overflow

How to pass values to an angularjs directive?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related