Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- $cart

qq_37435310 2017-06-29 11:38:12



<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="js/angular.js"></script>



</head>

<body>

<div ng-controller="myCtrl">

    <button ng-click="addcart()">添加</button>

    <table>

        <thead>

            <tr>

                <th>单价</th>

                <th>数量</th>

                <th>小计</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

            <tr ng-repeat="ca in cartList">

                <td>{{ca.price}}</td>

                <td>{{ca.count}}</td>

                <td>{{ca.price*ca.count}}</td>

                <td><a href="#" ng-click="deletecart($index)" >删除</a></td>

            </tr>

        </tbody>

    </table>

</div>

<script>

    /*实现一个自定义服务，要求采用行内式依赖注入创建ng对象。

     购物车的服务：$cart

     封装两个方法: add/delete*/

    var app=angular.module('myApp',['ng']);

    console.log(app);

    app.factory('$cart',['$scope',function($scope) {

                return {

                    add:function () {

                        $scope.cartList.push({price:23,count:8});

                        console.log(1);

                    },

                    delete:function (index) {

                        $scope.cartList.splice(index,1);

                        console.log(2);

                    }

                 }

    }]

    );

    app.controller('myCtrl',['$scope','$cart',function($scope,$cart) {

        $scope.cartList = [

            {price: 10, count: 1},

            {price: 20, count: 2},

            {price: 30, count: 3},

            {price: 40, count: 4},

            {price: 50, count: 5},

            {price: 60, count: 6}

        ];

        $scope.addcart= function () {

            $cart.add();

            console.log(3);

        };

        $scope.deletecart = function () {

            $cart.delete();

            console.log(4);

        };

    }

    ]);

</script>

</body>

</html>