簡單的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>

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

來源

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控制器不起作用

回答

相關問題