単純なAngularJSコントローラが動作しない

私はすべての可能な説明を検索して読みましたが、これまでに何の助けを借りていません。問題は、中括弧で囲まれたデータバインディングが機能しないことです（index.htmlにモジュールとコントローラを定義している場合のみ機能します）。単純なAngularJSコントローラが動作しない

の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（フォルダJSで）：

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

listcontroller.js（フォルダコントローラで）：

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

ビューショー私のようなもの：

{{ test.name }}

{{ test.type }}

利用可能{{test.length}}テストは現在ありません。現在、0件のテストが選択されています。

私は60分の角度、AngularJS.org、そしてYTのいくつかのチュートリアルに従ってきましたが、私はいつも同じ問題に遭遇しています。何か案は？再度[]持っている必要がありますので、

出典

2016-04-25 YaeVo

いくつかの問題が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>

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

listcontroller.js app.js

(function() { 

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

出典

2016-04-25 16:45:38 thegio

いくつかの変更を加えましたが、より良いあなたはプランナーを確認してください – thegio

あなたは素晴らしいです！ありがとう:) – YaeVo

-1

あなたは第二のモジュールを作成しました：

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

あなたはまた、エラーがあるかどうかを確認するために、コンソールを含めることはできますか？

出典

2016-04-25 16:40:13

ありがとう、それは問題を解決しませんでしたが。ここでそれはplnkrにあります：http://plnkr.co/edit/3TGzbd?p=preview – YaeVo

単純なAngularJSコントローラが動作しない

答えて

関連する問題