2017-01-20 6 views
0

コントローラパラメータ内の工場名を渡すと、内部の関数が動作しないように見えますが、ビューでもブラケットのレンダリングが表示されます。 私は間違っていますか?工場がなぜ機能しないのですか? (Angular.js)

私は何を参照してくださいHERE

:私は、コントローラ内のサービスを渡さない場合 enter image description here

ではなく、 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> 
+0

変数AggiungiVoceはあらかじめ定義されていません。これにより、望ましくない動作(グローバルとして作成される)が発生します。もし私の翻訳が正しいなら(Add Item)、それはとにかく方法でなければなりません。それをオブジェクトや他のメソッドに追加して返してください。そうすれば、それらの方法はすべて工場に注入することができます。 – cst1992

答えて

2

あなたは私たちではありません工場を正しく設置してください。メソッドを含むオブジェクトを返す必要があります。コントローラで使用する工場として

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でPreventivoTotaleFront.add()

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

つまり、あなたの機能を入れた場合、あなたはVOCIオブジェクトを返す

voci: { 
    add: function() {} 
} 

のように、この返却オブジェクトの内側に追加し、あなたのコントローラからそれを呼び出すことができます

PreventivoTotaleFront.add() 
1

使用する前にAggiungiVoce変数(var)を作成していません(AggiungiVoce.add)。このような場合、JavaScriptは親スコープ内でその変数AggiungiVoceがグローバルスコープまで存在するかどうかを調べます。そこに割り当てられます。だからこそ、あなたは工場が注入されていないときにそれを使うことができるのです。

工場では、メソッドのオブジェクトを作成して返す必要があります。ファクトリは一度しか作成されないので、ファクトリをインジェクトする任意の場所にこれらのメソッドにアクセスできます。

関連する問題