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 - 标记后的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;
});
}]);
})();

谢谢大家。

Answer 1

看起来您需要稍微更改标记。请注意以下更改......

<ul ng-repeat="knoten in treeCtrl.treedata">

=＆GT;

<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。请参阅此博客文章 - Digging into Angular’s “Controller as” syntax，了解有关该主题的更多信息

Answer 2

基于上述答案，如果你想将控制器用作synatax，你可以这样做：

bool

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

Answer 3

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

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

ng-repeat的角度误差

3 个答案: