将工厂数据注入控制器angular.js [英] inject factory data into controller angular.js

问题描述

我是angular的初学者，不知道如何将factory调用为controller.请在下面检查我的代码.我不知道这是正确的方法与否.请指导

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>

脚本

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

推荐答案

缺少两件事，您永远不会从工厂使用方法，也没有在控制器的方法中考虑工厂返回的项目

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.

工厂:

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

控制器:

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

这是工作中的 Plunker

Here is the working Plunker

这篇关于将工厂数据注入控制器angular.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！