Question

我已经搜索并阅读了所有可能的解释，但到目前为止还没有任何帮助。问题是与大括号的数据绑定不起作用（只有在我在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>
</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分钟内的Angular，AngularJS.org和YT上的一些教程，但我总是遇到同样的问题。有什么想法吗？

Answer 1

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

Answer 2

您创建了第二个模块，因此您需要再次使用[]：

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

您是否还可以包含控制台以查看是否有任何错误？

简单的AngularJS控制器不起作用

2 个答案: