为什么工厂不工作？ (Angular.js)答案

【问题标题】：Why factory won't Work? (Angular.js)为什么工厂不工作？ (Angular.js)
【发布时间】：2017-01-20 13:10:00
【问题描述】：

如果我在控制器参数中传递工厂名称，它里面的函数似乎不起作用，在视图中我也看到括号的渲染...... 我做错了什么？

我在这里看到：

相反，如果我不通过控制器内部的服务，它似乎可以工作 JS

var LandingApp = angular.module('LandingApp',[]);

LandingApp.factory('PreventivoTotaleFront',function(){

var voci = {};
voci.lista = [];

AggiungiVoce.add = function(voce){
    voci.lista.push({
        id: voci.lista.length,
        costo: voce
    })  
};

return voci; 
});

 //CONTROLLER 
LandingApp.controller('numberpages',function($scope,PreventivoTotaleFront){

$scope.primapagina = 150;
$scope.altrepagine = 90;
$scope.numeroaltrepagine = 0;

$scope.TotaleEuroPagine = 0;

$scope.CalcolaTotaleEuroPagine = function(){
    return $scope.TotaleEuroPagine = $scope.altrepagine * $scope.numeroaltrepagine + $scope.primapagina;
    AggiungiVoce.add(TotaleEuroPagine);
    alert(TotaleEuroPagine);
};

 });

HTML

    <body ng-app="LandingApp">
    <div class="container" ng-controller="numberpages">

        <form>

            <label>N° Pagine interne: </label><input type="number" min="0" ng-model="numeroaltrepagine" ng-change="CalcolaTotaleEuroPagine()"></input>
            <br/>{{TotaleEuroPagine | currency:""}}€<br/>

        </form>
        <br/><br/>
        <ul>
            <li ng-repeat="VociPreventivo in lista.voci">{{voci.id}} : {{voci.costo}}</li>
        </ul>

    </div>
</body>

【问题讨论】：

您的变量 AggiungiVoce 未预定义。这将导致不良行为（即它将被创建为全局）。如果我的翻译是正确的（添加项目），那么无论如何它应该是一种方法。您应该将它和其他方法添加到对象并返回它。这样，所有这些方法都可以在您注入工厂的任何地方使用。

标签： angularjs render factory

【解决方案1】：

您没有正确使用工厂。您需要返回一个包含方法的对象。

var LandingApp = angular.module('LandingApp', []);
LandingApp.factory('PreventivoTotaleFront', function () {
    var voci = {};
    voci.lista = [];

    return {
        add: function (voce) {
            voci.lista.push({
                id: voci.lista.length,
                costo: voce
            })
        }
    };
});

作为控制器中的使用工厂，即PreventivoTotaleFront.add()

//CONTROLLER
LandingApp.controller('numberpages', function ($scope, PreventivoTotaleFront) {
    $scope.CalcolaTotaleEuroPagine = function () {
        PreventivoTotaleFront.add(TotaleEuroPagine);        
    };
});

【讨论】：

【解决方案2】：

在您的工厂 PreventivoTotaleFront 中，如果您将函数添加到此返回对象中，则返回 voci 对象，例如

voci: {
  add: function() {}
}

然后你可以像

一样从你的控制器调用它

PreventivoTotaleFront.add()

【讨论】：

【解决方案3】：

在使用 AggiungiVoce 变量（使用 var）之前（在 AggiungiVoce.add 中），您不会创建它。在这种情况下，JavaScript 在父作用域中查找该变量 AggiungiVoce 的存在，一直到全局作用域。那里被分配了。所以这就是为什么你可以在没有注入工厂的情况下使用它。

在工厂中，您应该创建一个方法对象并将其返回。由于工厂只创建一次，因此您可以在注入工厂的任何地方访问这些方法。

【讨论】：