AngularJS，ng-repeat with ng-include not rendering

Question

Hi I am starting to learn angular and I'm running into a problem when I use a combination of ng-repeat with ng-include. 嗨，我开始学习角度，当我使用ng-repeat和ng-include的组合时，我遇到了问题。 No matter what I do I cannot get the templates to render. 无论我做什么，我都无法获得要渲染的模板。 I have a simple controller that creates a list of workspaces and each workspace has a TemplateUrl property. 我有一个简单的控制器，它创建一个工作区列表，每个工作区都有一个TemplateUrl属性。

I know the value is correct because if I just render out the raw text {{workspace.TemplateUrl}} and then put that directly into the ng-include it works no problem. 我知道这个值是正确的，因为如果我只是渲染原始文本{{workspace.TemplateUrl}}然后将其直接放入ng-include中就没问题了。 It just never seems to work when its coming from the controller. 当它来自控制器时它似乎永远不会起作用。 I have tried putting the template path in quotes like this too but it makes no difference. 我已经尝试将模板路径放在这样的引号中，但它没有任何区别。

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

When I run it I am seeing no requests to pull the template. 当我运行它时，我看不到拉模板的请求。 Can anyone help on this as its driving me a little nuts. 任何人都可以帮助这个，因为它让我有点疯狂。

<!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>

Controller code 控制器代码

 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"));
    }

Answer 1

I quote Your code 我引用你的代码

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

should be 应该

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

since it is a ng statement. 因为这是一个ng声明。

AngularJS，ng-repeat with ng-include not rendering

问题描述

1 个解决方案

解决方案1
9 已采纳 2013-01-01 17:42:38

AngularJS，ng-repeat with ng-include not rendering

问题描述

1 个解决方案

解决方案1 9 已采纳 2013-01-01 17:42:38

解决方案1
9 已采纳 2013-01-01 17:42:38