Einfache AngularJS-Controller funktioniert nicht

Ich habe alle möglichen Erklärungen gesucht und gelesen, aber bisher hat keiner geholfen. Das Problem ist, dass die Datenbindung mit den geschweiften Klammern nicht funktioniert (es funktioniert nur, wenn ich das Modul und den Controller in der index.html definieren).Einfache AngularJS-Controller funktioniert nicht

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="[email protected]*" 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> 
</html>

app.js (in Ordner js):

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

listcontroller.js (in Ordner-Controller):

(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'},]; 
}]); 
})();

Die Ansicht zeigt mir etwas wie das:

{{ test.name }}

{{ test.type }}

Es gibt zur Zeit {{test.length}} Tests zur Verfügung. Sie haben derzeit 0 Tests ausgewählt.

Ich habe in 60 Minuten ein paar Übungen, wie zum Beispiel die Winkel gefolgt, AngularJS.org, und einige auf YT, aber ich habe immer das gleiche Problem begegnen. Irgendwelche Ideen?

Quelle

2016-04-25 YaeVo

gibt es mehrere Probleme sehen Sie die Plunker:

https://plnkr.co/edit/bnYAsGk273kO5znMnAJh

index.html

<!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>

app.js

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

listcontroller.js

(function() { 

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

Quelle

2016-04-25 16:45:38 thegio

hat einige Änderungen, aber besser, Sie überprüfen die Plummer – thegio

Sie sind erstaunlich! Vielen Dank :) – YaeVo

-1

Sie erstellt ein zweites Modul, so dass Sie die [] wieder haben müssen:

var app = angular.module('myApp.controller', []);

Können Sie umfassen auch die Konsole zu sehen, ob es irgendwelche Fehler?

Quelle

2016-04-25 16:40:13

danke, obwohl es das Problem nicht gelöst hat. Hier ist es auf PLNKR: http://plnkr.co/edit/3TGzbd?p=preview – YaeVo

Einfache AngularJS-Controller funktioniert nicht

Antwort

Verwandte Themen