javascript - 如何在 AngularJS 组件中绑定(bind)多个单词属性

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>

并且您的组件绑定(bind)应该采用驼峰式大小写:

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