自定义指令发出angularjs_Angularjs_Angularjs Directive

自定义指令发出angularjs

angularjs

自定义指令发出angularjs,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我正在通过一本压力书学习angularjs，其中一个示例工作不正常，我相信问题在于自定义指令，但我不确定如何调试它，因为我的控制台甚至没有给我任何错误这是我的档案 app.html <!DOCTYPE html>  <html> <head> <title>Sports Store

我正在通过一本压力书学习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>

确保：

您的标记中有属性
```
ng app='sportstore'
```
，因为该指令在
```
cart
```
模块的范围内
在模板中，您使用了语法
，因为指令名为
```
cartSummary
```
，并且因为指令声明为EElement（参见
```
restrict:'E'）
```

下面是您示例中代码的一小部分：。

在app.html中尝试cart summary而不是cartsummary

尽管在定义指令时使用了名称cartSummary，但AngularJS规范化了组件名称以在这些格式之间映射。

@MichaelP。我只是试了一下，不，不行：（你在javascript控制台中有错误吗？@MichaelP。控制台中也没有错误。调试angularjs有点烦人@我猜你也试过

？@MichaelP。是的，我试过了，但似乎没有任何效果。我想确保我们都在同一页上，问题来自自定义指令ri是吗？我在我的sportStore.js文件中调用了它，不是吗？我只是查看了您添加的

sportStore.js

。似乎模块

cart

是模块

sportStore

的依赖项。我猜在您的主页中您有

ng app='sportStore'

对吗？是的，您是对的。这已经成为一个非常头痛和棘手的问题我将要删除这本教我angularjs的书……如果你更改常量

dataUrl

，这将设置

$scope.data.error=error

。你看到“产品数据未加载”警报了吗？我想确保至少angular指令正常工作。实际上，如果我更改

http:10，它不会正常工作.0.1.51:2403/doesNotExist

它仍在加载

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

    }
});

<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>

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