Com*_*Cat 3 javascript html5 singlepage angularjs
嗨,我开始学习角度,当我使用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"));
}
我引用你的代码
<div ng-include="{{workspace.TemplateUrl}}"></div>
应该
<div ng-include="workspace.TemplateUrl"></div>
因为这是一个ng声明.
| 归档时间： |
|
| 查看次数： |
4159 次 |
| 最近记录： |