angularJS中的工厂答案

【问题标题】：Factory in angularJSangularJS中的工厂
【发布时间】：2014-07-16 13:58:42
【问题描述】：

我试图在 angularJS 中使用工厂，但我没有按预期工作。

这是我的控制器：

as.controller('Test', ['testFactory', function($scope, $http, $rootScope)
{   

    $http.get($rootScope.appUrl + '/nao/test/test')
        .success(function(data, status, headers, config) {
            $scope.test = data;
    });

    $scope.form = {};

    $scope.submitForm = function(isValid) {
        if(isValid) 
        {   
            testFactory.testFactoryMethod(function($http) {
                $scope.test = data;
            });
        }
    };
}]);

如您所见，我将工厂“包含”到控制器中。

这是我的工厂：

.factory('testFactory', function($http) {
    return {
            testFactoryMethod: function(callback) {
                return $http('http://127.0.0.1:81/test/test', data).success(function(data) { callback(data);
            });
        }
    };
});

当我运行它时，我收到以下错误消息：

Error: $http is undefined
@http://127.0.0.1:82/nao/js/controllers.js:82:3

谁能帮帮我？

【问题讨论】：

标签： javascript angularjs runtime-error factory

【解决方案1】：

这是因为 Angular $injector。当您为.controller 提供一个数组作为第二个参数时，$injector 会尝试查找其名称中列出的所有依赖项，然后将它们注入到数组的最后一个元素（必须是 function），所以在您的情况下，会发生这种情况：

'testFactory' -> $scope
undefined -> $http
undefined -> $rootScope

你的代码应该是这样的：

as.controller('Test', ['$scope', '$http', '$rootScope', 'testFactory', function($scope, $http, $rootScope, testFactory)
{
    // ...

...或者像这样：

as.controller('Test', function($scope, $http, $rootScope, testFactory)
{
    // ...

编辑： 正如@sp00m 所说，如果您要对代码进行 uglify（缩小），则不应使用第二个示例，因为 uglifier 算法会将这些标识符替换为以下内容：

function(a, b, c, d)

然后 AngularJS 将无法再找到这些依赖项，而第一个示例看起来像这样：

['$scope', '$http', '$rootScope', 'testFactory', function(a, b, c, d)

这是有效的，因为您明确告诉 Angular 它必须注入哪些依赖项。

【讨论】：

最好使用第一个语法，如果你uglify你的代码，你可能会遇到第二个问题。
我很乐意提供帮助。也可以考虑阅读$injector documentation。
@DaniloValente：我在这里描述了另一个问题：stackoverflow.com/questions/24780449/… 现在当我按下按钮时，我收到此错误消息：错误：数据未定义，你能帮帮我吗？
我看看能不能帮忙。
@DaniloValente：非常感谢 :)

【解决方案2】：

您的控制器中的依赖项存在问题。您在数组中作为字符串的名称与您的工厂函数的参数不匹配。

这应该可行：

as.controller('Test', ['$scope', '$http', '$rootScope', 'testFactory', function($scope, $http, $rootScope, testFactory)
{   
    $http.get($rootScope.appUrl + '/nao/test/test')
        .success(function(data, status, headers, config) {
            $scope.test = data;
        });

    $scope.form = {};

    $scope.submitForm = function(isValid) {
        if(isValid) 
        {   
            testFactory.testFactoryMethod(function($http) {
                $scope.test = data;
            });
        }
    };
}]);

【讨论】：

【解决方案3】：

我认为你忘记了 $http.post：

$http(url, data) 应该是 $http.post(url, data)

和之前别人说的一样，需要在controllers函数中注入testFactory。

【讨论】：

【解决方案4】：

你应该像这样声明你的控制器

as.controller('Test', ['$scope', '$http', '$rootScope', 'testFactory', function($scope, $http, $rootScope, testFactory)
{
    ....
}

【讨论】：