In Angular JS, how do I inject data from directive attribute to template?

Question

In Angular JS, how do I inject data from directive attribute to template?

Here's my directive:

app.directive("helloWorld", function() {
  return {
    restrict: "E",
    scope: {
      name: "bind"
    },
    template: "<div>a {{name}} a</div>"
  };
});

Here's how I use it:

<hello-world name="John Smith"></hello-world>

I expect this page to be like this, when I run it:

<hello-world>
  <div>a John Smith a</div>
</hello-world>

But for some reason, name is not injected and actual result is like this:

<hello-world>
  <div>a {{name}} a</div>
</hello-world>

Anything I'm missing? I'm using Angular JS 1.0.2

javascript
templates
angularjs

Answer 1

The scope declaration is strange. I'm not sure about the "bind" declaration - maybe its something from the previous versions.

The current syntax for binding to a directive's attribute is like this:

return {
    restrict: "E",
    scope: {
      name: "@name"
    },
    template: "<div>a {{name}} a</div>"
};

In general, @attributeName. See here for more information on directives.