Javascript 为什么此属性不受我的指令'；什么范围？

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

按钮模板：

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

但是，仅使用

数字

属性的内容<代码>字母为空，就好像在我的指令中没有定义一样

我在Codepen上做了一个例子

---

我做错了什么？谢谢。

您必须将字母的绑定类型更改为@，或者将ABC括成单引号。

letters=“ABC”

在范围中查找名为ABC的变量，但未找到，因此未定义（因此未显示）。你能行

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

---

这表示字母将是一个字符串，而不是一个变量，在这种情况下，您将使用指令，就像您已经拥有的一样（不带引号）

范围：{x:'='}

符号表示HTML中的

x

属性接收角度表达式。HTML

x=“ABC”

意味着“给变量

x

值

$scope.ABC

”，这当然是

未定义的
！另一方面，
x=“3”
表示“给
x
最小值3”，这是可以的。如果要将一般字符串分配给
x
，请使用引号：
x=“'ABC'”
在Angularjs中，“=”用于数字，而字符串必须使用“@”
这是您的代码笔代码，以便更好地理解它

不，不傻，这实际上是一个非常常见的错误，绑定的工作方式比最初明显的要复杂得多。请注意，使用@是单向绑定，如果指令不应与绑定值混淆，则使用@可能更安全
angular.module ('MyApp').directive ('wsDial', function () {
  return {
    restrict: 'E',
    templateUrl: 'ws-dial.html',
    scope: {
      digit: '=',
      letters: '='
    }
  });

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

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