inject factory data into controller angular.js

问题

I am a beginner in angular and dont know how to call factory into controller. Please check my code below. I dont know this is a right way or not. please guide

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 gave following eror in console

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

回答1:

There are two things you are missing, you are never consuming your method from your factory, and you are not considering the items which returned by factory in your controller's method.

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

Here is the working Plunker

回答2:

Use this

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

来源：https://stackoverflow.com/questions/37495946/inject-factory-data-into-controller-angular-js

标签

angularjs

factory