javascript - 有条件地在 Angular js 中包含头文件

Question

我试图有条件地在我的角度应用程序中包含一个头文件，但由于某种原因它似乎没有加载该文件。

这就是我的看法

<div ng-controller="MyCtrl">
<div class="container-fluid" ng-include="'{{display_header()}}'"></div>
{{display_header()}} <!-- just for debug!! -->
</div>

我的控制器中有这个

$scope.display_header = function() {
    if ($location.path() === '/login') {
    return "partials/login_header.html";
    } else {
    return "partials/navbar.html";
    }
  }
};

我的调试行打印了正确的值，所以我想知道为什么它没有被插入到包含中。

Answer 1

ngInclude需要一个表达式，这应该有效：

ng-include="display_header()"

当您使用表达式（简单字符串）时，表达式中的字符串不会被插值，因此如果您检查控制台，您可能会看到链接到名为“%7B%7Bdisplay_header()%7D”的文件的 404 错误%7D”。

Answer 2

to 的参数ng-include是一个 Angular 表达式，它应该计算为一个表示要查找的 URL 的字符串。

所以当你这样做时：

ng-include="'{{display_header()}}'"

您告诉它评估string '{{display_header()}}'，这不是您想要的。您想要实际评估该功能，因此以下应该有效：

ng-include="display_header()"