AngularJS控制器和视图数据绑定问题的新手问题_Angularjs

AngularJS控制器和视图数据绑定问题的新手问题

angularjs

AngularJS控制器和视图数据绑定问题的新手问题,angularjs,Angularjs,我刚刚开始学习AngularJS，我认为我对视图、控制器和服务的交互方式有很好的理解，但我显然遗漏了一些东西你们中的一位可以快速查看一下为什么我的控制器没有被调用（尽管它正在加载） testController.js 'use strict'; angular.module('aces').controller('testController', ['testService' , function(dataservice) { var vm = this; vm.items =

我刚刚开始学习AngularJS，我认为我对视图、控制器和服务的交互方式有很好的理解，但我显然遗漏了一些东西

你们中的一位可以快速查看一下为什么我的控制器没有被调用（尽管它正在加载）

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>


AngularJS试验
正在获取
序列
完整的
描述
不适用？
更新人
更新于
{{task.Sequence}}
{{task.Description}
{{task.UpdatedBy}
{{task.updateDate}
获取任务

谢谢大家!

您的变量在html范围内混淆了

vm

实际上是控制器内的作用域，因此更改：

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

到

也许你还在更新它，但我在plunker的“app.js”文件中没有看到任何代码；你能把它扔进去吗？没有它，你的应用程序就不会被实例化。谢谢另外，请检查您的浏览器控制台，有一个注入错误。如果您想使用

$resource

，除了缺少对ngResource的依赖（app.module（'aces'，['ngResource'））之外，您必须在主模块中包含

angular resource.js

并作为依赖项注入，您应该使用items.push（{…}），而不是items.add。谢谢！当我试图剥离我的实际应用程序时，有些东西丢失了，但我丢失了一些东西。现在它正在加载（获取弹出窗口），但ng重复项没有被绑定/更新。我更新了plunker

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