0
Я изучаю angularjs через книгу 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> и <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;
});
});
@MichaelP. Я просто дал это выстрел и нет, не работает :( –
У вас есть ошибка в консоли javascript? –
@MichaelP. Никаких ошибок с консоли. Его любопытная досадная отладка angularjs stuff @ _ @ –