AngularJSコンポーネントの複数ワード属性をバインドする方法

Question

名前が複数の単語の場合、AngularJSコンポーネントに属性を渡すにはどうすればよいですか？例えば

、私はこの

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

のように定義されたテストコンポーネントを持っていると私はこれがうまく機能し、単一ワードの属性については、この

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

のようにHTMLでそれを使用するとします。しかし、foo_barのような複数単語の名前を使用しようとすると、動作しません。代わりに、htmlに空白（例：value =）が表示されます。アンダースコア（foo_bar）、ダッシュ（foo-bar）、ラクダのケース（fooBar）など、私が考えることができるすべてを試しましたが、何も機能しません。私はオンラインで検索しようとしましたが、助けになったものは何も見つかりませんでした。あなたがHTMLに属性

Answer 1

は次のようにダッシュを使用します。

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

そして、あなたのコンポーネントのバインディングは、ラクダ同棲する必要があります：私は行方不明になったトリックにそのプロパティであるよう

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