AngularJS：当注入控制器时，工厂总是未定义 [英] AngularJS: Factory is always undefined when injected in controller

问题描述

我正在尝试一个简单的AddressBook Angular应用程序示例。我有一个工厂返回一个记录数组，它使用List控制器显示在列表视图中。

  angular.module （'abModule'，['ngRoute']）
 .factory（'AddressBook'，function（）{
 var address_book = [
 {
id：1，
first_name：John，
last_name：Doe，
age：29 
}，
 {
id ：2，
first_name：Anna，
last_name：Smith，
age：24 
}，
 {
id：3，
first_name：Peter，
last_name：Jones，
age：39 
} 
] ; 
 alert（'inside factory function'）; 
 return {
 get：function（）{
 return address_book 
} 
}; 
}} 
 .config（function（$ routeProvider）{
 $ routeProvider 
 .when（'/'，{
 controller：'list_controller'，
 templateUrl： 'list.html'
}）
 .when（'/ add'，{
 controller：'add_controller'，
 templateUrl：'add.html'
} ）
 .otherwise（{
 redirectTo：'/'
}）; 
}）
 .controller（'list_controller'，['$ scope'，function（$ scope，AddressBook）{
 $ scope.address_book = AddressBook; 
}]）
 .controller（'add_controller'，['$ scope'，function（$ scope，AddressBook）{
 //$scope.entry = {}; 
 $ scope.save = function {
 AddressBook.set（
 {
id：$ scope.address_book.length +1，
first_name：$ scope.entry.firt_name，
 last_name：$ scope.entry.last_name，
age：$ scope.entry.age 
} 
）; 
}; 
} 
  

这里的'AddressBook'在'list_controller'里总是未定义的。任何想法，我错了？非常感谢任何帮助。

解决方案

您不是注释 AddressBook 您的DI

  .controller（'list_controller'，['$ scope'，function（$ scope，AddressBook）{
 $ scope.address_book = AddressBook; 
}]）
  

应为：

  .controller（'list_controller'，['$ scope'，'AddressBook'，function（$ scope，AddressBook）{
 $ scope.address_book = AddressBook; 
}]）
  

与其他控制器相同。 / p>

I am trying a simple example of an AddressBook Angular application. I have a factory that returns an array of records and it it gets displayed in a list view using a List controller

angular.module('abModule', ['ngRoute'])
.factory('AddressBook', function() {
    var address_book = [
        {
            "id": 1,
            "first_name": "John",
            "last_name": "Doe",
            "age": 29
        },
        {
            "id": 2,
            "first_name": "Anna",
            "last_name": " Smith",
            "age": 24
        },
        {
            "id": 3,
            "first_name": "Peter",
            "last_name": " Jones",
            "age": 39
        }
    ];
    alert('inside factory function');
    return {
        get: function() {
            return address_book
        }
    };
})
.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        controller:'list_controller',
        templateUrl:'list.html'
    })
    .when('/add', {
        controller:'add_controller',
        templateUrl:'add.html'
    })
    .otherwise({
        redirectTo:'/'
    });          
})
.controller('list_controller',['$scope', function ($scope, AddressBook) {
    $scope.address_book = AddressBook;
}])
.controller('add_controller',['$scope', function ($scope,AddressBook) {
    //$scope.entry = {};
    $scope.save = function() {
        AddressBook.set(
            {
                "id": $scope.address_book.length +1,
                "first_name":$scope.entry.firt_name,
                "last_name":$scope.entry.last_name,
                "age":$scope.entry.age
            }
        );
    };
}]);

Here 'AddressBook' is always undefined inside 'list_controller'. Any idea where I am going wrong? Any help is greatly appreciated.

解决方案

You are not annotating AddressBook for your DI

.controller('list_controller',['$scope', function ($scope, AddressBook) {
    $scope.address_book = AddressBook;
}])

should be:

.controller('list_controller',['$scope', 'AddressBook', function ($scope, AddressBook) {
    $scope.address_book = AddressBook;
}])

Same for the other controller.

这篇关于AngularJS：当注入控制器时，工厂总是未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！