CODEWITHSUNDEEP
angularjsrenderfactory
Pds Ink
Pds Ink

Reputation: 765

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

If i pass the factory name inside my controller parameter, the function inside it seems not work, also in the view i see the render of brackets.... What i am doing wrong?

HERE WHAT I SEE: enter image description here

instead, If i don't pass the service inside the controller, it seems to work 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);
};

 });

The 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>

Upvotes: 0

Views: 54

Answers (3)

cst1992
cst1992

Reputation: 3931

You're not creating your AggiungiVoce variable(with var) before you use it(in AggiungiVoce.add). In such a case, JavaScript looks in parent scope for the existence of that variable AggiungiVoce all the way up to global scope. There it's assigned. So that is why you're able to use it when the factory is not injected.

In the factory, you should create an object of methods and return that. Since factories are only created once, you are able to access those methods anywhere you inject the factory.

Upvotes: 1

Salih Şenol &#199;akarcı
Salih Şenol &#199;akarcı

Reputation: 2330

In your factory PreventivoTotaleFront, you return voci object if you put your function add inside this returning object like 

voci: {
  add: function() {}
}

and then you can call it from your controller like 

PreventivoTotaleFront.add()

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You are not using factory properly. You need to return a object containing methods. 

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

As use factory in the controller i.e. PreventivoTotaleFront.add()

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

Upvotes: 2

Related Questions