为什么指令ng-href需要{{}}而其他指令不需要?{}}?

时间:2014-01-23 09:07:31

标签: angularjs angularjs-directive

我只是想知道为什么我需要为ng-href添加双花括号而其他一些指令不需要它们?

<a ng-href="{{myScopeVar}}" ng-if="myScopeVar">link</a>

请注意,ng-href需要大括号,而ng-if则不需要。

2 个答案:

答案 0 :(得分:45)

我对你的问题不太确定。但我认为你想知道为什么在angular指令中有不同的语法风格。首先,请看一下这篇文章:Difference between double and single curly brace in angular JS?答案解释了{{}}{}与没有大括号之间的区别。

对于您的具体示例,如在文档中所述:ng-href需要一个模板(任何可以包含{{}}标记的字符串),而ng-if需要一个表达式 - 例如你可能不会写{{}},因为angular会对它进行评估。

如果你看一下你会看到的角度来源,ng-href使用attr.$observe而ng-if使用$scope.$watch函数。每次更改属性值时都会调用$ observe。当表达式产生新值时,会调用$ watch。

但为什么这两种方式不同?我认为有一点是更容易使用和代码可读性。现在你可以写:

<a ng-href="http://yourdomain.com/users/{{userId}}/post/{{postId}}">title</a>

如您所见,您只为动态插入的userIdpostId值编写表达式。如果ng-href也会使用我们必须编写的$watch函数(不执行此操作,因为它不起作用 - 它只显示差异):

<a ng-href="'http://yourdomain.com/users/'+userId+'/post'+postId">title</a>

答案 1 :(得分:-1)

即使我使用ng-href data-ng-href,也会导致验证错误。 我使用<link rel="stylesheet" data-ng-href="{{datas}}" href="/">来传递验证错误。

希望它会帮助某人