AngularJSの片方向バインディングが動作しないようです。

Question

私は最近、古い角型アプリケーションのために（それほど新しい）コンポーネントを使用し始めました。私は<button/>のような簡単なもののためにsome dumb componentsを作ろうとしています。

何らかの理由で、片方向バインディングが機能しないようです。

（difficult-button.js中）difficultyButtonコンポーネントに結合levelは常にundefinedを返しますが、onLevelChosenは（difficulty-button.jsで、再び）結合optionsコンポーネントは、渡されたコールバックを持っているようです。

どこの人が間違っているのか分かりますか？ここで

---

この問題を実証jsbinリンクである：彼らはvm.levelの値のホールドをキャッチすることができませんでしたので、クラスred、​​とblueが印加されない飽きないかhttp://jsbin.com/rixukuh/11/edit?html,js

注意してください。

また、どのボタンがクリックされても、コンソールは常にLEVEL => undefinedを出力します。より多くのコンテキストが必要な場合

---

FULL CODE

はここで、完全なコードです。

options.tpl.html

<div class="full-page-cover"> 
<div class="options-grid"> 
    <!-- some random markup --> 
    <div class="buttons-grid">  
     <difficulty-button 
      level="easy" 
      on-level-chosen="vm.chooseDifficulty(level)" > 
      I'm just here for having fun! 
     </difficulty-button> 
     <!-- some more `difficulty-buttons` --> 
    </div>      
    </div> 
</div> 

options.js

import angular from 'angular'; 
import DifficultyButtonModule from './difficulty-button.js'; 
import template from './options.tpl.html'; 

class OptionsController { 
    constructor() { /* ... */ } 
    chooseDifficulty(level) { /* ... */ } 
} 

const OptionsModule = angular.module('options', [DifficultyButtonModule.name]) 

OptionsModule.component('options', { 
    template, 
    controller: OptionsController, 
    controllerAs: 'vm' 
}); 

export default OptionsModule; 

difficulty-button.tpl.html

<button 
    ng-class="[ 
     'uk-button uk-button-large', 
     { 
     easy: 'uk-button-default', 
     medium: 'uk-button-primary', 
     hard: 'uk-button-danger' 
     } [ vm.level ] 
    ]" 
    ng-click="vm.onLevelChosen({ level: vm.level })" 
    ng-transclude> 

</button> 

difficulty-button.js

import angular from 'angular'; 
import template from './difficulty-button.tpl.html'; 

const DifficultyButtonModule = angular.module('difficultyButton', []);          
DifficultyButtonModule.component('difficultyButton', { 
    template, 
    bindings: { 
    level: '<', 
    onLevelChosen: '&' 
    }, 
    controllerAs: 'vm', 
    transclude: true 
}); 

export default DiffButtonModule; 

Answer 1

あなたはこの

level="easy" 

を行うときに（$scope.easyのように）あなたのスコープに簡単プロパティに対して結合しています。もちろん存在しません。あなたは、HTMLから直接、文字列値に対してバインドしたい場合は、他のレベルのために単一引用符

level="'easy'" 

と同じを使用する必要があります。それは正常に動作します。

オブジェクトに対して引き続きバインドを使用する場合は、オブジェクトにバインドを作成する必要があります。しかし、片方向だけが必要なので、文字列を使っても問題ありません。

免責事項：私はコンポーネントを扱っていないので、説明が間違っている可能性があります。私はちょうどangularjsで働いた