Angular JS ng-Include表达式

Question

ng-include到目前为止,我试图阅读文档,但没有运气.我想要做的就是ng-include评估模板/部分所在的路径并加载内容:

<div data-ng-include src="'{{pageData.src}}'"></div>

我可以看到在控制台中pageData.src返回"tpl/page.html".我尝试了以下变化:

<div data-ng-include src="{{pageData.src}}"></div>
<div data-ng-include src='{{pageData.src}}'></div>
<div data-ng-include src={{pageData.src}}></div>

他们似乎都没有评估表达方式.我收到以下错误:

Error: [$parse:syntax] http://errors.angularjs.org/1.2.9/$parse/syntax?p0=pageData.src&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=3&p3=%7B%7BpageData.src%7D%7D&p4=pageData.src%7D%7D

反馈非常感谢!

Answer 1

在ng-include中,src采用了一个javascript表达式,所以在你的情况下,下面应该有效:

<div data-ng-include src="pageData.src"></div>

当你看到这样的时候

<div data-ng-include src="'templates/myTemplate.html'"></div>

双引号内的额外单引号是一个javascript表达式,在本例中是一个字符串文字.

当你看到{{}}时,这是针对不采用javascript表达式而只是字符串的指令.例如,ng-href采用字符串.该字符串可以是js表达式的结果,该表达式应该包含在{{}}上,例如

<a ng-href="{{pageData.src}}/myImage.jpg">Go</a>

最后要提一下让我感到困惑的事情,那就是当有一个带有单个curlies {}的表达式时.例如

<a ng-class="{'active': item.active, 'locked': item.disabled}">Go</a>

在这种情况下,这是一个js映射表达式,ng-class采用具有值为true的名称.因此,如果在上面的item.active评估为true,那么'active'将作为一个类添加.