javascript - In Angular JS, how do I inject data from directive attribute to template? - Stack Overflow

admin管理员组

文章数量:1026989

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

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

Share Improve this question Follow asked Oct 14, 2012 at 10:20 Andrey AgibalovAndrey Agibalov 7,67488 gold badges6767 silver badges112112 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

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.

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

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

Share Improve this question Follow asked Oct 14, 2012 at 10:20 Andrey AgibalovAndrey Agibalov 7,67488 gold badges6767 silver badges112112 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

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.

本文标签： javascriptIn Angular JShow do I inject data from directive attribute to templateStack Overflow