Имеется страничка, тело которой отображается с помощью Angular JS. На данной странице аналогичный код ведет себя по-разному. Вот страница (пока не утруждайтесь, полностю читать код не надо).
<!DOCTYPE html>
<html ng-app="productStore"> ng-app ТУТ
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Products</title>
<link href="/Content/Site.css" type="text/css" rel="stylesheet" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="/Scripts/jquery.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/Product/List.js"></script>
<style type="text/css">
body {
padding-top: 70px;
}
</style>
</head>
<body ng-controller="ProductController as productCtrl"> директива с контроллером ТУТ
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img src="/Content/Saucony_Logo.png" style="height: 30px" />
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text navbar-right">
<b>Your cart:</b>
{{productCtrl.totalPrice | currency}}
<a href="/Cart/Index?returnUrl=%2F&class=navbar-link">Checkout</a>
</p>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div>
<div class="container">
<div class="row-fluid">
<script type="text/javascript">
//setVisibleOfNavigationBar(true);
</script>
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Show categories</button>
</p>
<div class="row" id="productContainer">
<div class="col-6 col-sm-6 col-lg-4" ng-repeat="prod in productCtrl.products">
<h2>{{prod.Name}}</h2>
<p>{{prod.Description}}</p>
<div style="float: left; margin-right: 20px">
<img width="75" height="75" class="img-thumbnail" src="/Product/GetImage?ProductID={{prod.ProductID}}"/>
</div>
<h2>{{prod.Price | currency}}</h2>
<a class="btn btn-success" name="addToCartLink" ng-click="productCtrl.addToCart(prod.ProductID)">+ Add to cart</a> ЭТО РАБОТАЕТ
</div>
</div>
<ul class="pagination">
<li><a data-bind="click: nextPage">Prev</a></li>
<li><a data-bind="click: previousPage">Next</a></li>
</ul>
</div>
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" role="navigation">
<div class="list-group" id="navigationBar">
<h3>Categories</h3>
<b><a id="categoryLink" name="categoryLink" class="list-group-item active" ng-click="productCtrl.getProducts()">All</a> ЭТО НЕ РАБОТАЕТ
<a name="categoryLink" id="categoryLink" class="list-group-item" ng-click="productCtrl.getProducts('Chess')">Chess</a>
<a name="categoryLink" id="categoryLink" class="list-group-item" ng-click="productCtrl.getProducts('Soccer')">Soccer</a>
<a name="categoryLink" id="categoryLink" class="list-group-item" ng-click="productCtrl.getProducts('Watersports')">Watersports</a></b>
</div>
</div>
</div>
</div>
</body>
</html>
Вот это работает:
<a class="btn btn-success" name="addToCartLink" ng-click="productCtrl.addToCart(prod.ProductID)">+ Add to cart</a>
А вот это - нет:
<a name="categoryLink" id="categoryLink" class="list-group-item" ng-click="productCtrl.getProducts('Chess')">Chess</a>
В чем проблема - вообще не могу понять. Обидно, если в моей невнимтельности.
На всякий случай приведу код JS:
var productStore = angular.module('productStore', []);
productStore.factory('productRepository', function ($http) {
return {
getProducts: function (callback, category) {
if (category == null) category = "";
$http.get('/api/productservice/' + category).success(callback);
},
addToCart: function (id) {
$http.post('/api/cartservice/add/' + id);
},
getTotalPrice: function (callback) {
$http.get('/api/cartservice/').success(callback);
}
}
});
var ProductController = new productStore.controller('ProductController', function ($http, productRepository) {
var self = this;
getTotalPrice();
function getTotalPrice() {
productRepository.getTotalPrice(function (result) {
self.totalPrice = result;
})
};
getProducts();
function getProducts(category) {
productRepository.getProducts((function (results) {
self.products = results;
}), category);
};
self.addToCart = function (id) {
productRepository.addToCart(id);
getTotalPrice();
}
});
