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

时间:2017-03-14 17:52:59

标签: javascript angularjs angularjs-components

我最近开始使用旧的角度应用程序(不是那么新的)组件。我正在努力为<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

请注意,redgreenblue类永远不会被应用,因为它们永远无法抓住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; 

1 个答案:

答案 0 :(得分:1)

当你这样做时

level="easy"

您绑定范围内的简易属性(例如$scope.easy)。这当然不存在。如果要直接从html绑定字符串值,则需要使用单引号

level="'easy'"

和其他级别相同。那会很好。

如果您仍想对对象使用bind,则需要在其范围内创建它们。但由于你只需要一种方法,使用字符串应该可以正常工作

免责声明:我还没有使用过组件,因此可能是解释不正确。我刚刚使用angularjs