2

如果这是一个简单的问题，我很抱歉。我是新手，可能不了解要搜索的正确内容以找到答案。

我基本上遵循了这个 angularJS 教程http://www.youtube.com/watch?v=i9MHigUZKEM

除了建立一个连接到我的控制器的工厂外，我已经完成了所有这些。

这是工厂的代码：

    demoApp.factory('simpleFactory', function(){
    var people = [
          { name: 'Will', age: '30' },
          { name:'Jack', age:'26' },
          { name: 'Nadine', age: '21' },
          { name:'Zach', age:'28' }
        ];

  var factory = {};
  factory.getPeople = function() {
    return people;
  };
});

这是控制器：

    demoApp.controller('FirstCtrl', ['$scope', 'simpleFactory', function ($scope, simpleFactory) {

    $scope.people = simpleFactory.getPeople();        
    }]);

只需在 HTML 中简单重复一下：

Name:
   <input type="text" ng-model="filter.name"> {{ nameText }}
   <ul>
      <li ng-repeat="person in people | filter:filter.name | orderBy: 'name'">{{ person.name }}- {{ person.age }}</li>
   </ul>

我得到的错误是javascript控制台中的“TypeError：无法调用未定义的方法'getPeople'”。

注意：当我在控制器中硬编码数据对象时，这一切都可以正常工作，如下所示：

    demoApp.controller('FirstCtrl', ['$scope', 'simpleFactory', function ($scope, simpleFactory) {

    $scope.people = [
      { name: 'Will', age: '30' },
      { name:'Jack', age:'26' },
      { name: 'Nadine', age: '21' },
      { name:'Zach', age:'28' }
    ];        
 }]);
4

2 回答 2

2

您的服务中的一个小变化；

  demoApp.factory('simpleFactory', function(){
  var people = [
        { name: 'Will', age: '30' },
        { name:'Jack', age:'26' },
        { name: 'Nadine', age: '21' },
        { name:'Zach', age:'28' }
  ];

  return {
    getPeople: function() {
     return people;
    };
  }

});

在你的控制器中

demoApp.controller('FirstCtrl', ['$scope', 'simpleFactory', function ($scope, simpleFactory) {

$scope.people = simpleFactory.getPeople();        
}]);
于 2014-02-27T06:29:34.427 回答
0

本质上，您只是缺少“工厂”对象中的 return 语句，但如果您也进行一些重命名以避免混淆，可能会更清楚。

示例，改编自AngularJS书：

demoApp.factory('People', function(){ // Renamed factory to be more descriptive
  var people = {}; // Renamed 'factory' to 'people', as an object we can prototype more functions later

  people.query = function() { // called query, but could be getPeople
    return [ // just return a static array for now
      { name: 'Will', age: '30' },
      { name:'Jack', age:'26' },
      { name: 'Nadine', age: '21' },
      { name:'Zach', age:'28' }
    ];
  }

  return people;
});

所以现在你的控制器可以把这些信息拉进来：

demoApp.controller('FirstCtrl', ['$scope', 'People', function ($scope, People) { // dependency injection
  $scope.people = People.query();
});

所以现在我们有一个用于返回对象的 People 描述性工厂，其中一个称为查询。我们可以稍后更新这个查询函数来读取参数、触发 AJAX 调用并做一些复杂的事情。但一次一步:)

于 2014-02-27T04:47:32.693 回答