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>

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

<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，我很容易看到确切的问题。