AngularJS，带有ng-include的ng-repeat不渲染答案

【问题标题】：AngularJS, ng-repeat with ng-include not renderingAngularJS，带有ng-include的ng-repeat不渲染
【发布时间】：2013-01-01 17:39:10
【问题描述】：

您好，我开始学习 Angular，当我将 ng-repeat 与 ng-include 结合使用时遇到了问题。无论我做什么，我都无法获得要渲染的模板。我有一个简单的控制器，它创建一个工作区列表，每个工作区都有一个 TemplateUrl 属性。

我知道这个值是正确的，因为如果我只是渲染出原始文本 {{workspace.TemplateUrl}} 然后将其直接放入 ng-include 中，它就没有问题。当它来自控制器时，它似乎永远不会工作。我也尝试将模板路径放在这样的引号中，但这没有区别。

$scope.Workspaces.push(new Workspace("'/app/templates/Template1.html'", "Workspace 1"));

当我运行它时，我没有看到拉取模板的请求。谁能帮忙解决这个问题，因为它让我有点发疯。

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Workspaces</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="app/libraries/jquery.js"></script>
    <script src="app/libraries/bootstrap.min.js"></script>
    <script src="app/libraries/angular.js"></script>
    <script src="app/app.js"></script>
</head>

<body ng-controller="HostController">
    <div>
        <ul class="unstyled">
            <li ng-repeat="workspace in Workspaces">
                <p>{{workspace.TemplateUrl}}</p>
                <hr />
                <div ng-include="{{workspace.TemplateUrl}}"></div>
            </li>
        </ul>
    </div>

</body>
</html>

控制器代码

 var Workspace = (function () {
        function Workspace(templateUrl, name) {
            this.TemplateUrl = templateUrl;
            this.Name = name;
        }
        return Workspace;
    })();
    function HostController($scope) {
        $scope.Workspaces = new Array();
        $scope.Workspaces.push(new Workspace("/app/templates/Template1.html", "Workspace 1"));
        $scope.Workspaces.push(new Workspace("/app/templates/Template2.html", "Workspace 2"));
        $scope.Workspaces.push(new Workspace("/app/templates/Template1.html", "Workspace 3"));
        $scope.Workspaces.push(new Workspace("/app/templates/Template2.html", "Workspace 4"));
        $scope.Workspaces.push(new Workspace("/app/templates/Template1.html", "Workspace 5"));
    }

【问题讨论】：

标签： javascript html angularjs singlepage

【解决方案1】：

我引用你的代码

 <div ng-include="{{workspace.TemplateUrl}}"></div>

应该是

 <div ng-include="workspace.TemplateUrl"></div>

因为它是一个 ng 语句。

【讨论】：

啊，就是这样！极好的！！我只是假设所有绑定值都必须像绑定表达式一样格式化。一个让我记住的前进！ :-)
这是一个直接评估的语句，因此您不需要 {{}}。这也意味着您不能在 ng-include 中放置像 ng-include="/templates/my-temp.html" 这样的字符串，您必须像 ng-include="'/templates/my-temp.html 一样引用它'" ，就像是一些javascript。