似乎无法让 AngularJS 单向绑定工作

Question

我最近开始为一个旧的 Angular 应用程序使用（不是那么新的）组件。我正在尝试为<button/>s 等琐碎的东西制作some dumb components。

出于某种原因，我似乎无法让一种方式绑定工作！

difficultyButton 组件中的level 绑定（在difficult-button.js 中）总是返回undefined，但onLevelChosen 绑定（再次在difficulty-button.js 中）似乎具有options 的回调组件传递给它。

你们有没有看到我可能出错的地方？

---

这是一个演示此问题的 jsbin 链接：http://jsbin.com/rixukuh/11/edit?html,js

注意 red、green 和 blue 类是如何永远不会被应用的，因为它们永远无法抓住 vm.level 的值。

此外，控制台总是打印出LEVEL => undefined，无论单击什么按钮。

---

完整代码

如果需要更多上下文，这里是完整的代码。

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