Question

如果名称是多个单词，如何将属性传递给AngularJS组件？

例如，假设我有一个像这样定义的测试组件

  .component('myComponent', {
    template: `<p> value = {{$ctrl.foo_bar}}`,
    bindings: {
      foo_bar: '<',
    }
  })

我在HTML中使用它

<my-component foo_bar="44444"></my-component>

对于单字属性，这很好用。但是，当我尝试使用像foo_bar这样的多字词名称时，它并不起作用。相反，它只是在html中显示为空白（即value =）。我已经尝试了我能想到的一切，包括下划线（foo_bar），破折号（foo-bar）和骆驼案例（fooBar），但没有任何效果。我尝试过在线搜索，但我找不到任何有帮助的东西。

Answer 1

HTML中的属性将使用破折号：

<my-component foo-bar="44444"></my-component>

你的组件绑定应该是驼峰式的：

.component('myComponent', {
    template: `<p> value = {{$ctrl.fooBar}}`,
    bindings: {
      fooBar: '=',
    }
  })

如何绑定AngularJS组件中的多个单词属性

1 个答案: