纳克重复角误差
在过去的三个小时里我做了一个小应用。它还没有准备好，但是有一个错误。我搞不懂，出什么事了。
以下是我的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-重复没有呈现.content-tag之后的Eyerything是空的。标题中的{{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;
});
}]);
})();谢谢大家。
回答 3
Stack Overflow用户
发布于 2015-05-29 15:52:59
看起来你需要稍微修改一下你的标记。观察以下变化..。
<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。有关这一主题的更多见解，请参见本文的博文- 深入研究角的“控制器作为”语法。
Stack Overflow用户
发布于 2015-05-29 16:02:15
在上述答案的基础上，如果您想使用控制器作为synatax，您可以这样做：
var vm = this;
vm.treedata = [{
"name": "Titel",
"id": "1"
}, {
"name": "Allgemeine Standardangaben",
"id": "2"
}];
vm.text = "Hallo";http://plnkr.co/edit/tBqMGYe3nR8C8e4ukeya?p=preview
Stack Overflow用户
发布于 2015-05-29 16:05:49
您的代码似乎被封装在一个(function(){})()中。我认为这导致你的角度代码根本不执行。尝试将你的角度代码直接放入你的controller.js中。
当你把它放在那里时，代码实际上是在等待这个函数被调用，这样视图就可以访问代码了。
https://stackoverflow.com/questions/30533860
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号