YaeVo YaeVo - 7 months ago 28
Javascript Question

Simple AngularJS controller does not work

I've searched and read all possible explanations, but none have helped so far.
The problem is that the data binding with the curly brackets doesn't work (it only works if I define the module and controller in the index.html).

index.html :

<html lang="en" data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen">
<script src="controllers/listcontroller.js"></script>
<script src="js/app.js"></script>
<script data-require="angular.js@*" data-semver="2.0.0" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
</head>
<div class="main">
<body data-ng-controller="ListController">
<ul>
<li data-ng-repeat="test in tests">
<span>{{ test.name }}</span>
<p>{{ test.type }}</p>
</li>
</ul>
There are currently {{test.length}} tests available.
You have currently selected 0 tests.
<button class="animatedbutton"> Proceed </button>

</div>
</body>




app.js (in folder js):

(function () {
'use strict';
angular.module('myApp', ['myApp.controller']);
})();


listcontroller.js (in folder controllers):

(function () {
'use strict';
var app = angular.module('myApp.controller');
app.controller('ListController', ['$scope', function ($scope) {
$scope.tests = [
{'name': 'A',
'type': '1'},
{'name': 'B',
'type': '2'},];
}]);
})();


The view shows me something like this:



  • {{ test.name }}



{{ test.type }}

There are currently {{test.length}} tests available.
You have currently selected 0 tests.


I've followed a couple of tutorials, such as the Angular in 60 Minutes, AngularJS.org, and some on YT, but I always encounter the same problem. Any ideas?

Answer

there are several issues look at the plunker:

https://plnkr.co/edit/bnYAsGk273kO5znMnAJh

   <!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>

  <script src="listcontroller.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="ListController">
  <div class="main">
    <ul>
      <li ng-repeat="test in tests">
        <span>{{ test.name }}</span>
        <p>{{ test.type }}</p>
      </li>
    </ul>

    There are currently {{test.length}} tests available. You have currently selected 0 tests.
    <button class="animatedbutton"> Proceed </button>
  </div>
</body>

</html>
Comments