Javascript Can'；AngularJS似乎无法单向绑定工作

我最近开始为一个旧的angular应用程序使用（不是很新的）组件。我正在尝试制作一些琐碎的东西，比如

s等等

由于某些原因，我似乎无法使单向绑定工作

困难按钮

组件（在

困难按钮.js

中）中的

级别

绑定总是返回

未定义

，但是

onlevelSelected

绑定（同样，在

困难按钮.js

中）似乎有

选项

组件传递给它的回调

你们有谁知道我哪里出了问题吗

---

下面是一个jsbin链接，演示此问题：

请注意，类

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>

<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>

难度按钮.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>

<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>

当你这么做的时候

level="easy"

您正在绑定范围中的easy属性（如

$scope.easy

）。这当然不存在。如果要直接与html中的字符串值绑定，则需要使用单引号

level="'easy'"

其他级别也一样。那很好

若您仍然希望对对象使用绑定，则需要在您的作用域中创建它们。但由于您只需要一种方法，所以使用字符串应该可以很好地工作

---

免责声明：我没有使用过组件，因此可能是解释不正确。我刚和angularjs合作过

你能提供一把小提琴吗？@Gonzalo.-当然！让我来做一个。@Gonzalo。-检查我的编辑！我添加了一个jsbin文件，希望您使用比document.querySelector（“#难点btn tpl”）.innerText更聪明的东西code@PetrAveryanov-是的<代码>从“/Demobility button.tpl.html”导入模板是我在真实代码中的做法。哇！那太过分了！现在工作。非常感谢：）尽管如此，我一直认为

controllerAs

语法允许通过我们提供的名称访问

$scope

对象，在本例中，

“vm”

。有可能是在全局范围内查找了

“easy”

？