最近三个小时，我做了一个小应用程序。还没有准备好，但是有错误。我不知道怎么了。
这是我的HTML：
<html lang="en" ng-app="reporting">
<head>
<meta charset="utf-8" />
<title>.reporting</title>
<!-- BOOTSTRAP -->
<link href="Content/bootstrap.css" rel="stylesheet" />
<!-- BOOTSTRAP -->
<!-- JQUERY -->
<script src="Scripts/jquery-2.1.4.js"></script>
<!-- JQUERY -->
<!-- EDITOR -->
<script src="Scripts/wysihtml5-editor/bootstrap3-wysihtml5.all.min.js"></script>
<link href="Scripts/wysihtml5-editor/bootstrap3-wysihtml5.css" rel="stylesheet" />
<script src="Scripts/wysihtml5-editor/bootstrap3-wysihtml5.min.js"></script>
<!-- EDITOR -->
<!-- ANGULAR -->
<script src="Scripts/angular.js"></script>
<!-- ANGULAR -->
<!-- CUSTOM -->
<link href="css/app.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<!--<script src="js/init.js"></script>-->
<script src="js/controller.js"></script>
<!-- CUSTOM -->
</head>
<body>
<div id="top" class="row">
<div id="treecontainer" class="col-md-4" ng-controller="TreeController as treeCtrl">
<header>
<h2>Übersicht, {{treeCtrl.text}}, {{2 + 2}}</h2>
</header>
<content id="tree">
<ul ng-repeat="knoten in treeCtrl.treedata">
<li>H: {{knoten.name}}</li>
</ul>
</content>
</div>
</body>
</html>
这是我的controller.js：
(function () {
var reportapp = angular.module('reporting', []);
reportapp.controller('TreeController', ['$http', '$scope', function ($http, $scope) {
$scope.treedata = [{
"name": "Titel",
"id": "1"
},
{
"name": "Allgemeine Standardangaben",
"id": "2"
}];
$scope.text = "Hallo";
$http.get('../data/tree.json').success(function (data) {
$scope.treedata = data;
console.log($scope.treedata);
});
}]);
})();
问题是，我的HTML中的ng-repeat无法呈现。-tag之后的content空白。{{treeCtrl.text}}标题中也不会显示。范围可能有什么问题吗？我看了两个小时的解决方案，但无法想象，那会是什么...
感谢您的建议。
解决方案
这是我的工作代码。希望这会帮助某人：
index.html：
...
<div id="treecontainer" class="col-md-4" ng-controller="TreeController as treeCtrl">
<header>
<h2>Übersicht, {{treeCtrl.text}}</h2>
</header>
<content id="tree">
<ul ng-repeat="knoten in treedata">
<li>{{knoten.name}}</li>
</ul>
</content>
</div>
...
和controller.js：
(function () {
var reportapp = angular.module('reporting', []);
reportapp.controller('TreeController', ['$http', '$scope', function ($http, $scope) {
$scope.treedata = [];
$scope.text = "Hallo";
$http.get('../data/tree.json').success(function (data) {
$scope.treedata = data;
});
}]);
})();
谢谢大家。
看起来您需要稍微更改标记。观察以下变化...
<ul ng-repeat="knoten in treeCtrl.treedata">
=>
<ul ng-repeat="knoten in treedata">
treedata已在上定义$scope。无需致电treeCtrl。同样，这也将是相同的text。只需放置{{ text }}在您的标记中即可。
此外，需要利用controllerName.value语法的时候就是定义this而不是的值$scope。例如...
reportapp.controller('TreeController', ['$http', '$scope', function ($http, $scope) {
this.treedata = []; // -- notice this.
....
然后，我们将需要您首先在标记中尝试过的语法。坚持$scope下去，您将不需要它，也可以重构使用this。请参阅此博客文章-深入研究Angular的“ Controller as”语法，以进一步了解该主题
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句