AngularJS 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

非常感谢您的反馈！

- Jesse

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>

最后提到一件让我感到困惑的事情，那就是当表达式中只有一个花括号 {} 时。例如：

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

在这种情况下，这是一个JavaScript映射表达式，ng-class取一个名称，并且该名称的值为true。因此，如果在上面的item.active求值为true，则“active”将作为类添加。

- DavidC

---

谢谢！我简直不敢相信我没有尝试过那个。 - Jesse

我们可以在ng-include中传递表达式吗？我想使用控制器动态更改URL。 - Pawan Kotak

Answer 2

尝试这个：

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

如果您能够发布一个jsFiddle，那么我就可以更容易地看到确切的问题。

- Abhishek Jain