问题描述:

The last three hours I made a little app. It's not ready yet, but there is an error. I can not figure out, what's wrong.

Here is my 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>

And here is my 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);

});

}]);

})();

The problem is, that the ng-repeat in my HTML does not render. Eyerything after the content-tag is empty. {{treeCtrl.text}} in the headline won't render too.

Might there anything be wrong with the scope?

I watched two hours for a solution but can't imagine, what this would be...

Thanks for your suggestions.

SOLUTION

Here is my working code. Hope, this will help someone:

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>

...

and the 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;

});

}]);

})();

Thanks everybody.

网友答案:

Looks like you need to change your markup a bit. Observe the following change...

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

=>

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

treedata is already defined on your $scope. No need to call treeCtrl. Likewise, this will be the same for text as well. Just place {{ text }} in your markup.


Furthermore, the time when you need to leverage the controllerName.value syntax is when you define your values on this instead of $scope. For example...

reportapp.controller('TreeController', ['$http', '$scope', function ($http, $scope) {
    this.treedata = []; // -- notice this.
    ....

Then we would need the syntax you have first attempted in the markup. Stick with $scope and you won't need it, or you can re-factor to use this. See this blog post - Digging into Angular’s “Controller as” syntax for some more insight on the subject

网友答案:

Building on the above answer, if you want to use controller as synatax, you could do something like this:

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

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

网友答案:

Your code seems to be encapsulated in a (function(){})() . I think this is causing you angular code not execute at all. Try and put your angular code directly into your controller.js.

When you put it there, the code is actually waiting for this function to be called so the view could have access to the code.

相关阅读:
Top