我最近开始使用旧的角度应用程序(不是那么新的)组件。我正在努力为<button/>
s之类的琐碎事物制作some dumb components。
出于某种原因,我似乎无法通过单向绑定工作!
level
组件difficultyButton
中的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;
答案 0 :(得分:1)
当你这样做时
level="easy"
您绑定范围内的简易属性(例如$scope.easy
)。这当然不存在。如果要直接从html绑定字符串值,则需要使用单引号
level="'easy'"
和其他级别相同。那会很好。
如果您仍想对对象使用bind,则需要在其范围内创建它们。但由于你只需要一种方法,使用字符串应该可以正常工作
免责声明:我还没有使用过组件,因此可能是解释不正确。我刚刚使用angularjs