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

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

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

就像说ABC只是文字而不是在范围内寻找它。

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

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

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

Answer 2

在Angularjs中，'='用于数字，其中字符串必须使用'@' 这是您的codepen代码，以便更好地理解它 http://codepen.io/anon/pen/RPjLLX

Answer 3

scope: { x: '=' }表示法表示HTML中的x属性接收Angular表达式。 HTML x="ABC"表示“提供x 变量 $scope.ABC”的值，当然是undefined！另一方面，x="3"表示“给x第三个值”，这没关系。如果您希望将litteral字符串分配给x，请使用引号：x="'ABC'"。

为什么这个属性不受我指令范围的约束？

3 个答案: