我已经搜索并阅读了所有可能的解释,但到目前为止,没有任何帮助。
问题是带大括号的数据绑定不起作用(仅当我在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的教程,但是我总是遇到相同的问题。有任何想法吗?

最佳答案

有几个问题可以看一下矮人:

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

07-24 09:44
查看更多