Angular 错误 ng-repeat

Question

最后三个小时我做了一个小应用。它还没有准备好，但是有一个错误。我想不通，怎么了。

这是我的 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 没有呈现。 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;
});
}]);
})();

谢谢大家

Answer 1

看来您需要稍微更改一下标记。观察以下变化...

<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。请参阅此博客 post - Digging into Angular’s “Controller as” syntax 以获得有关该主题的更多见解

Answer 2

基于上述答案，如果你想使用控制器作为语法，你可以这样做：

var vm = this;
  vm.treedata = [{
    "name": "Titel",
    "id": "1"
  }, {
    "name": "Allgemeine Standardangaben",
    "id": "2"
  }];
  vm.text = "Hallo";

http://plnkr.co/edit/tBqMGYe3nR8C8e4ukeya?p=preview

Answer 3

您的代码似乎被封装在 (function(){})() 中。我认为这会导致您 angular 代码根本无法执行。尝试将您的 angular 代码直接放入您的 controller.js。

当你把它放在那里时，代码实际上是在等待这个函数被调用，这样视图就可以访问代码。

Angular 错误 ng-repeat

Angular error with ng-repeat

html

javascript

angularjs

ng-repeat