在Angular JS中,如何将指令属性中的数据注入模板?

时间:2012-10-14 10:20:35

标签: javascript templates angularjs

这是我的指示:

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

以下是我如何使用它:

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

当我运行它时,我希望这个页面是这样的:

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

但出于某种原因,name未注入,实际结果如下:

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

我缺少什么?我正在使用Angular JS 1.0.2

1 个答案:

答案 0 :(得分:14)

范围声明很奇怪。我不确定"bind"声明 - 可能是以前版本的声明。

绑定到指令属性的当前语法如下:

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

一般来说,@attributeName。请参阅此处more information on directives