javascript - 为什么此属性未绑定(bind)到我的指令范围？

Question

我正在尝试编写一个提供自定义按钮的指令。按钮中的文本通过两个属性提供给指令。

按钮模板:

<button>
  <div>{{digit}}</div>
  <div>{{letters}}</div>
</button>

指令调用:

<ws-dial digit="2" letters="ABC"></ws-dial>

指令定义如下:

angular.module ('MyApp').directive ('wsDial', function () {
  return {
    restrict: 'E',
    templateUrl: 'ws-dial.html',
    scope: {
      digit: '=',
      letters: '='
    }
  });

但是，只使用了digit属性的内容； letters 是空的，就好像它在我的指令中未定义一样。

我在Codepen上做了一个例子here .

我做错了什么？谢谢。

Answer 1

您必须将字母的绑定(bind)类型更改为 @ 或将 ABC 括在单引号中。letters="ABC" 在作用域中查找名为 ABC 的变量，但未找到，因此未定义(因此未显示)。你可以做到

<ws-dial digit="2" letters="'ABC'"></ws-dial>

这就像说 ABC 只是文本，不要在范围内寻找它。

另一种方法是将指令声明更改为

  scope: {
    digit: '=',
    letters: '@'
  }

表示 letters 将是一个字符串而不是一个变量，在这种情况下，您将使用已有的指令(不带引号)