Angularjs首次尝试依赖注入

时间:2013-07-27 12:22:49

标签: angularjs angularjs-scope angularjs-service

我有一个UserAddController,我希望能够访问Web API返回的国家/地区列表。 Web API很好地返回数据。这是我获取数据的app.js:

app.factory('Country', function ($resource) {
    return $resource(
        "/api/country/:Id",
        { Id: "@Id" },
        { "update": { method: "PUT" } });  
});

这是我的控制器:

var UserAddController = function ($scope, $location, service, User) {

    $scope.action = "Add";
    $scope.countries = service.countries;

};

我在这里宣布并创建一项服务:

app.factory('CountryService', CountryService);

function CountryService($resource) {
    return $resource(
       "/api/country/:Id",
       { Id: "@Id" },
       { "update": { method: "PUT" } });  
}

我使用与上面相同的代码仅用于测试目的。我正在注射这样的服务:

UserAddController.$inject = ['$scope', 'CountryService'];

这是我第一次尝试依赖注射,我无法弄清楚我哪里出错了。我目前得到的错误是'服务未定义'。我已经尝试将服务和Country对象传递给Controller,结果相同。任何人都可以提出任何建议吗?

编辑:在我的控制器中,这会成功填充代码中的警报,但不会填充警报。这是什么原因?

function CountryService($rootScope, $http) {
    var self = {};

    //self.countries = [{ "$id": "1", "CountryId": 1, "CountryName": "United Kingdom" }, { "$id": "2", "CountryId": 2, "CountryName": "Republic of Ireland" }, { "$id": "3", "CountryId": 3, "CountryName": "Australia" }, { "$id": "4", "CountryId": 4, "CountryName": "New Zealand" }, { "$id": "5", "CountryId": 5, "CountryName": "United States" }, { "$id": "6", "CountryId": 6, "CountryName": "France" }, { "$id": "7", "CountryId": 7, "CountryName": "Germany" }, { "$id": "8", "CountryId": 8, "CountryName": "Finland" }];

    $http({
        method: 'GET',
        url: '/api/country'
    }).success(function (data, status, headers, config) {
        self.countries = data;
    });
    alert(self.countries);
    return self;
}

2 个答案:

答案 0 :(得分:1)

您需要添加其他服务/依赖项。

UserAddController.$inject = ['$scope', 
                             '$location', 
                             'CountryService', 
                             'UserService'];

我假设最后一个依赖项是名为“UserService”的服务。它的签名将是

app.factory('UserService', UserService);

编辑:

您需要实例化一个新变量。

//Inside function body
$scope.countries = service.countries;
$scope.newCountry = $scope.countries.get({Id : someId},callbackFn);

现在你在$ scope.newCountry

中有一个'someId'

答案 1 :(得分:0)

确保您已注入ngResource

app = angular.module("app", ['ngResource']);

您需要正确注入模块

UserAddController.$inject = ['$scope', '$location', 'CountryService', 'user'];

引用了doc

  

您可以使用$ inject属性指定服务名称   是一个包含要注入的服务名称的字符串的数组。   名称必须与注册的相应服务ID匹配   角。 服务ID的顺序很重要:顺序   调用工厂函数时将使用数组中的服务   注入参数。

我创建了一个FIDDLE,您可以尝试。