こんにちは、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"));
}