Angularjs没有看到.service

时间:2016-09-26 22:26:54

标签: javascript angularjs angular-material

我使用Angularjs并尝试实现.service()和.factory(),但Angularjs没有看到已实现的函数。我在这个文件中有另一个.factory()和.controller(),它工作正常。

dbCtrl.js

    var app = angular.module('scMainApp');
app.controller('dbCtrl', function ($scope, Database) {
    var db = new Database('itemsDB');

    db.all()
    .then(function (result) {
        $scope.$apply(function () {
            $scope.items = result;
        })
    });

    $scope.db = db;
});
    app.service('Cart', function (scItem) {
        this.init = function() {
            this.$cart = {
                items: []
            };
        };

        this.addItem = function(id, name, price, quantity) {
            console.log('Added!');
            var inCart = this.getItemById(id);

            var newItem = new scItem(id, name, price, quantity);
            this.$cart.item.push(newItem);
            // Show that item added
        };

    this.removeItem = function (index) {
        var item = this.$cart.items.splice(index, 1)[0] || {};
    };

    this.getCart = function(){
        return this.$cart;
    };

    this.getItems = function(){
        return this.getCart().items;
    };

    this.getTotal = function () {
        var count = 0;
        var items = this.getItems();
        angular.forEach(items, function (item) {
            count += item.getQuantity();
        });
        return count;
    };
});
app.factory('scItem', function() {
    var item = (id, name, price, quantity) => {
        this.setId(id);
        this.setName(name);
        this.setPrice(price);
        this.setQuantity(quantity);
    };
    item.prototype.setId = (id) => {
        if(id) this.id = id;
    };

    item.prototype.getId = () => {
        return this.name;
    };  

    item.prototype.setName = (name) => {
        if(id) this.name = name;
    };

    item.prototype.getName = () => {
        return this.name;
    };

    item.prototype.setPrice = (price) => {
        var _price = parseFloat(price);
        if(_price )
            if (_price <= 0)
                console.log('Price must be higher then 0');
            else
                this.price = price;
        };

        item.prototype.getPrice = () => {
            return this.price;
        };

        item.prototype.setQuantity = function(quantity, relative){


            var quantityRes = parseInt(quantity);
            if (quantityRes % 1 === 0){
                if (relative === true){
                    this._quantity  += quantityRes;
                } else {
                    this._quantity = quantityRes;
                }
                if (this._quantity < 1) this._quantity = 1;

            }


        };

        item.prototype.getQuantity = function(){
            return this._quantity;
        };

        item.prototype.ToObject = () => {
            return {
                id: this.getId(),
                name: this.getName(),
                price: this.getPrice(),
                quantity: this.getQuantity()
            }
        }; 

        return item;
    });

main.html中

<div class="content-wrapper" layout="row" flex>
        <md-content class="md-padding">
            <div class="content-wrapper" layout="row" layout-wrap>
                <md-card flex="30" ng-repeat="itemCat in items">
                    <md-card-header> {{itemCat.title}} </md-card-header>
                    <img src="http://placehold.it/350x350" flex-gt-xs alt="user avatar" class="md-card-image">
                    <md-card-title>
                        <md-card-title-text>
                            {{itemCat.article}}
                        </md-card-title-text>
                    </md-card-title>
                    <md-card-footer>
                        <md-card-actions layout="column" layout-align="end stretch">
                            <span style="margin-bottom: 10px;"> Цена: {{itemCat.price}} </span>
                            <md-button class="md-raised md-primary md-hue-1 " ng-click="Cart.addItem(id, name, price, quantity)">Add to cart</md-button>
                        </md-card-actions>
                    </md-card-footer>
                </md-card>


            </div>
        </md-content>
    </div>

2 个答案:

答案 0 :(得分:0)

从名称来看,您的服务是工厂函数,因此它应该返回对象,而不是工厂函数。

# BEGIN WordPress
<IfModule mod_rewrite.c>

Options +FollowSymLinks
RewriteEngine On
RewriteBase /


RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

RedirectMatch 301 ^/wp-content/uploads/([0-9]{4})/([0-9]{2})/(.*).txt$ /view/$3.txt

</IfModule>

# END WordPress

答案 1 :(得分:-2)

首先,服务需要返回方法。

return {
    getTotal: this.getTotal,
    getItems: this.getItems,
    addItem: this.addItem
}

工厂工作的原因是因为它是一个单身人士,并且有一个有效的回报&#34;值&#34;。