为什么这个属性没有绑定到我的指令范围？

我想写一个指令，提供一个自定义按钮。该按钮内的文本通过两个属性提供给指令。为什么这个属性没有绑定到我的指令范围？

按钮模板：

<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上做了一个例子。

我在做什么错？谢谢。

来源

2015-06-24 piwi

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

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

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

做它正在改变指令宣布为

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

它说的信件将是一个字符串，而不是在这种情况下，你可以使用指令，因为你已经有（不带引号）变量

的另一种方式

来源

2015-06-24 07:51:38 masimplo

妈的，这是一个愚蠢的错误;谢谢。 – piwi

不是，不是愚蠢的，它实际上是一个非常常见的错误，绑定的工作方式比第一次看到的要复杂得多。请注意，使用@是单向绑定，如果该指令不应该与绑定值混淆，则可能更安全 – masimplo

scope: { x: '=' }表示法表示HTML中的x属性接收到一个Angular表达式。 HTML x="ABC"的意思是“给出x值变量$scope.ABC”，当然这是undefined！另一方面，x="3"的意思是“给x输电值3”，这是可以的。如果您要将输注字符串分配到x，请使用引号：x="'ABC'"。

来源

2015-06-24 07:53:50

在Angularjs“=”用于where字符串瓯必须使用数字“@” 这里是你codepen代码更好地理解它 http://codepen.io/anon/pen/RPjLLX

来源

2015-06-24 07:53:57

为什么这个属性没有绑定到我的指令范围？

回答

相关问题