问题:

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

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

回答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.

转载请标明出处:AngularJS, ng-repeat with ng-include not rendering

文章来源: AngularJS, ng-repeat with ng-include not rendering

标签

ng-repeat

angular