Question

我通过Apress书学习angularjs，其中一个例子工作不正常，我相信问题是自定义指令，但我不知道如何调试它，因为我的控制台甚至没有给我任何错误。

这是我的档案。

app.html

<!DOCTYPE html>
<!-- We are defining the sportStore module here in the html tag-->
<html>
    <head>
        <title>Sports Store</title>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap-theme.min.css" rel="stylesheet" />
    </head>
    <!-- Applying ng-controller to the body tagg -->
    <body  ng-app="sportsStore" ng-controller="sportsStoreCtrl">
        <div class="navbar navbar-inverse">
            <a class="navbar-brand" href="#">Sports Store</a>
        <cartsummary></cartsummary>
        </div>
    <div class="alert alert-danger" ng-show="data.error">
        Error ({{data.error.status}}). The product data was not loaded. <a href="/app.html" class="alert-link">Click here to try again</a>
    </div>

    <ng-include src="'views/productList.html'"></ng-include>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="angular-resource.min.js"></script>
    <script src="controllers/sportsStore.js"></script>
    <script src="filters/customFilters.js"></script>
    <script src="controllers/productListControllers.js"></script>
    <script src="components/cart/cart.js"></script>
    </body>
</html>

我查看了自定义指令的文档，我试过了 <div cart-summary></div> <cartsummary></cartsummary＆gt;和<cartsummary/>（我的书告诉我使用这个）并且似乎都没有。

这是我的指令文件

cart.js

angular.module('cart', []).factory('cart', function() {
    var cartData = [];

    return {
        addProduct: function(id,name,price) {
            var addedToExistingItem = false;
            for (var i = 0; i < cartData.length; i++) {
                if (cartData[i].id == id) {
                    cartData[i].count++;
                    addedToExistingItem = true;
                    break;
                }
            }
            if (!addedToExistingItem) {
                cartData.push({
                    count: 1, id: id, price: price, name: name
                });
            }
        },
        removeProduct: function(id) {
            for (var i = 0; i < cartData.length; i++) {
                if (cartData[i].id == id) {
                    cartData.splice(i,1);
                    break;
                }
            }
        },
        getProducts: function() {
            return cartData;
        }
    }
}).directive('cartSummary', function(cart){
    return {
        restrict: "E",
        templateUrl: "components/cart/cartSummary.html",
        controller: function($scope) {
            var cartData = cart.getProducts();

            $scope.total = function() {
                var total = 0;
                for (var i = 0; i < cartData.length; i++) {
                    total += (cartData[i].price * cartData[i].count);
                }
                return total;
            }

            $scope.itemCount = function() {
                var total = 0;
                for(var i = 0; i < cartData.length; i++) {
                    total += cartData[i].count;
                }
                return total;
            }
        }

    }
});

和指令的html文件

cartSummary.html

<style>
    .navbar-right {float: right !important; margin-right: 5px;}
    .navbar-text {margin-right: 10px;}
</style>

<div class="navbar-right">
    <div class="navbar-text">
        <b>Your cart:</b>
        {{itemCount()}} item(s),
        {{total() | currency}}
    </div>
    <a class="btn btn-default navbar-btn">Checkout</a>
</div>

sportsStore.js

//declaring a dependency called customFilters that contains a unqiue filter
angular.module('sportsStore',['customFilters', 'cart']);

// calling the angular.module method passing in sportsStore located in app.html
angular.module('sportsStore').constant('dataUrl', "http://10.0.1.51:2403/products").controller('sportsStoreCtrl', function($scope,$http,dataUrl) {
    $scope.data = {};

    $http.get(dataUrl).success(function(data) {
        $scope.data.products = data;
    }).error(function (error){
        $scope.data.error = error;
    });
});

Answer 1

确保：

您的标记中包含属性ng-app='sportsStore'，因为该指令位于cart模块的范围内。
在您的模板中，您使用了语法<cart-summary></cart-summary>，因为该指令名为cartSummary，并且因为该指令被声明为 E lement（参见restrict: 'E')

以下是您的示例中的代码：fiddle。

Answer 2

在app.html中尝试使用cart-summary而不是cartsummary 虽然在定义指令时使用名称cartSummary，但AngularJS规范化组件名称以在这些格式之间进行映射。

自定义指令发出angularjs

2 个答案: