似乎无法使 AngularJS 单向绑定起作用

Question

我最近开始使用旧 angular 应用程序的（不是很新的）组件。我正在尝试为 <button/>s 等琐碎的事情制作 some dumb components。

出于某种原因，我似乎无法使用一种方式绑定！

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

你们有没有看到我可能哪里出错了？

这里有一个 jsbin link 演示了这个问题：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

合作过

似乎无法使 AngularJS 单向绑定起作用

Can't seem to get AngularJS one-way binding to work

javascript

angularjs

angularjs-components