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 {}的表达式时。 e.g。

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

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

Answer 2

试试这个： -

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

如果您可以发布一个jsFiddle，我很容易看到确切的问题。

Angular JS ng-Include表达式

2 个答案: