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

Question

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

这是我看到的：

相反，如果我不在控制器内部传递服务，它似乎可以工作 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>

Answer 1

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

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);        
    };
});

Answer 2

在你的工厂 PreventivoTotaleFront 中，你 return voci 对象，如果你把你的函数添加到这个 returning 对象里面，比如

voci: {
  add: function() {}
}

然后你可以像

这样从你的控制器调用它

PreventivoTotaleFront.add()

Answer 3

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

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

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

Why factory won't Work? (Angular.js)

factory

render

angularjs