inject factory data in controller angular.js

Question

Ich bin ein Anfänger in eckigen und weiß nicht, wie man factory in controller anrufen. Bitte überprüfen Sie meinen Code unten. Ich weiß nicht, ob das richtig ist oder nicht. Bitte führen

HTML

<div class="cart" ng-controller="cartWatch"> 
     <table width="100%"> 
      <tr ng-repeat="pro in item"> 
       <td>Name : {{pro.title}}</td> 
       <td>Quantity : {{pro.quantity}} <input type="text" ng-model="pro.quantity"></input></td> 
       <td>Price : {{pro.price | currency : '&#8377'}}</td> 
      </tr> 
     </table> 
     <div class="total"> 
      total Price : <strong>{{totalPrice()}}</strong> <br> 
      Discount : <strong>{{bill.discount}}</strong> <br> 
      You Pay : <strong>{{subTotal()}}</strong> 
     </div> 
    </div> 

SCRIPT

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

appProduct.factory('Items', function() { 
var items = {}; 
items.query = function() { 

return [ 
    {title: 'Paint pots', quantity: 8, price: 3.95}, 
    {title: 'Polka dots', quantity: 17, price: 12.95}, 
    {title: 'Pebbles', quantity: 5, price: 6.95} 
]; 
}; 
return items; 
}); 

appProduct.controller('cartWatch', function($scope, Items){ 

    $scope.bill = {}; 
    $scope.totalBeforeDiscount = {}; 




    $scope.totalPrice = function(){ 
     var total = 0; 
     for (var i = 0; i <= $scope.item.length - 1; i++) { 
      total += $scope.item[i].price * $scope.item[i].quantity; 
     } 
     return total; 
    } 
}) 

Above Code gab folgende eror in Konsole

TypeError: Cannot read property 'length' of undefined 
    at $scope.totalPrice (controller.js:105) 
    at n.$digest (angular.min.js:142) 
    at n.$apply (angular.min.js:145) 
    at angular.min.js:21 
    at Object.invoke (angular.min.js:41) 
    at c (angular.min.js:21) 
    at yc (angular.min.js:21) 
    at ee (angular.min.js:20) 
    at angular.min.js:313 

Answer 1

Es gibt zwei Dinge, die Sie vermissen, sind Sie nie con Wenn Sie Ihre Methode von Ihrer Fabrik übernehmen, denken Sie nicht an die Artikel, die werkseitig in der Methode Ihres Controllers zurückgegeben wurden.

Factory:

appProduct.factory('Items', function() { 
    var items = {}; 
    return { 
    query: function() { 
     return [{ 
     title: 'Paint pots', 
     quantity: 8, 
     price: 3.95 
     }, { 
     title: 'Polka dots', 
     quantity: 17, 
     price: 12.95 
     }, { 
     title: 'Pebbles', 
     quantity: 5, 
     price: 6.95 
     }]; 
    } 
    }  
}); 

Controller:

appProduct.controller('cartWatch', function($scope, Items){ 
    $scope.items = Items.query(); 
    $scope.bill = {}; 
    $scope.totalBeforeDiscount = {}; 
    $scope.totalPrice = function(){ 
     var total = 0; 
     for (var i = 0; i <= $scope.items.length - 1; i++) { 
      total += $scope.items[i].price * $scope.items[i].quantity; 
     } 
     $scope.totalBeforeDiscount =total; 
    } 
}) 

Hier ist die Arbeits Plunker

Answer 2

verwenden

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

appProduct.factory('Items', function() { 
var items = {}; 
items.query = function() { 

return [ 
    {title: 'Paint pots', quantity: 8, price: 3.95}, 
    {title: 'Polka dots', quantity: 17, price: 12.95}, 
    {title: 'Pebbles', quantity: 5, price: 6.95} 
]; 
}; 
return items.query; 
}); 

appProduct.controller('cartWatch', ['$scope', '$Items', function ($scope, Items) { 
    $scope.bill = {}; 
    $scope.totalBeforeDiscount = {}; 

    $scope.totalPrice = function(){ 
     var total = 0; 
     for (var i = 0; i <= $scope.items.length - 1; i++) { 
      total += $scope.items[i].price * $scope.item[i].quantity; 
     } 
     return total; 
    } 
}]);