Question

我刚刚开始使用AngularJS，我认为我对视图，控制器和服务的交互方式有很好的理解，但我显然缺少某些东西。 / p>

你们其中一个人可以快速浏览一下，看看为什么我的控制器没有被调用（虽然它正在被加载）？

testController.js

'use strict';
angular.module('aces').controller('testController', ['testService' ,
function(dataservice) {
    var vm = this;
    vm.items = [];
    this.getTodos = function getTodos() {
        window.alert("hooray!");
        dataservice.getTodos()
            .then(querySucceeded);

        function querySucceeded(data) {
            vm.items = data.results;
        }
    };
    this.getTodos();
}]);

testService.js

'use strict';
angular.module('aces', []).factory('testService', ['$resource', function ($resource) {
var acesServiceFactory = {};
var _getTodos = function() {
    var items = [];
    items.add({ Sequence:1, IsNA: true, IsCompleted: false, Description: 'Task 1', UpdatedBy: 'brad', UpdatedDate: '7/11/2014' });
    items.add({ Sequence: 2, IsNA: false, IsCompleted: false, Description: 'Task 2', UpdatedBy: '', UpdatedDate: '' });
    items.add({ Sequence: 3, IsNA: false, IsCompleted: true, Description: 'Task 3', UpdatedBy: 'john', UpdatedDate: '7/10/2014' });
    items.add({ Sequence:4, IsNA: true, IsCompleted: false, Description: 'Task 4', UpdatedBy: 'george', UpdatedDate: '7/09/2014' });
    return items;
};
acesServiceFactory.getTodos = _getTodos;
return acesServiceFactory;

}]);

的index.html：

<html ng-app="aces">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>AngularJS Test</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />
<!-- 3rd party libraries -->
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js">    </script>
<!-- Load app main script -->
<!-- Load services -->
<script src="testService.js"></script>
<!-- Load controllers -->
<script src="testController.js"></script>
</head>

<body>
<div class="container">
  <div ng-controller="testController as ctrl" class="row">
    <div class="col-md-2"></div>
    <div>
      <p ng-show="!ctrl.vm.items">Fetching...</p>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th>Sequence</th>
            <th>Completed</th>
            <th>Description</th>
            <th>N/A?</th>
            <th>Updated By</th>
            <th>Updated On</th>
          </tr>
        </thead>
        <tbody>
          <!--<tr ng-show="results" data-ng-repeat="task in vm.items">-->
          <tr ng-repeat="task in ctrl.vm.items">
            <td>
                            {{ task.Sequence }}
                        </td>
            <td>
              <input type="checkbox" ng-model="task.IsCompleted" />
            </td>
            <td>
                            {{ task.Description }}
                        </td>
            <td>
              <input type="checkbox" ng-model="task.IsNA" />
            </td>
            <td>
                            {{ task.UpdatedBy }}
                        </td>
            <td>
                            {{ task.UpdatedDate }}
                        </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-md-2">
      <button ng-click="ctrl.getTodos()" class="btn">Get Tasks</button>
    </div>
  </div>
</div>
</body>

</html>

Link to Plunker

谢谢！

Answer 1

你的变量在html范围内混淆了。 vm实际上是控制器中的范围，因此请更改：

<tr ng-repeat="task in ctrl.vm.items">

到

<tr ng-repeat="task in ctrl.items">

的 Working DEMO

新手使用AngularJS控制器时遇到麻烦并查看数据绑定问题

1 个答案: