Задать вопрос
MaxSter
@MaxSter
Software engineer
javascript

Почему не работает ng-click?

Имеется страничка, тело которой отображается с помощью 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>
                            &nbsp;{{productCtrl.totalPrice | currency}}
                            
                            <a href="/Cart/Index?returnUrl=%2F&amp;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();
    }
});
  • Вопрос задан
  • 2481 просмотр
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
@lqip32
Не являюсь специалистом в angular, но почему в описании контроллера, вы делаете self.addToCart, но не пишите self.getProducts = function(category)?
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Ебушки воробушки... А теперь посмотрите на мой вариант, взгляните на свою реализацию, и скажите как лучше.

angular.module('productStore', [])

.factory('productRepository', function ($http) {
    var dataResolve = function(promise) {
         return promise.then(function(response) {
              return response.data;
         }
    }
   
    return {
        getProducts: function (category) {
            category = category || '';
            return dataResolver($http.get('/api/productservice/' + category));
        },
        addToCart: function (id) {
            return dataResolver($http.post('/api/cartservice/add/' + id));
        },
        getTotalPrice: function (callback) {
            return dataResolver($http.get('/api/cartservice/'));
        }
    }
})

.controller('ProductController', function ($http, productRepository) {

    var updateTotalPrice = angular.bind(this, function() {
         return productRepository.getTotalPrice.then(angular.bind(this, function(result) {
               this.totalPrice = result;
         }));
    });
    updateTotalPrice();

    productRepository.getProducts(category).then(angular.bind(this, function(results) {
        this.products = results;
    });

    this.addToCart = function(id) {
        productRepository.addToCart(id).then(function() {
               updateTotalPrice();
        };
    }
});


Используйте промисы, не используйте эти стремные штуки с this. У вас есть .bind нативный и angular.bind.

в частности меня вводит в ступор следующее:
var ProductController = new productStore.controller


Если вы методы этого контроллера используете где-то еще, то самое время подумать о том что бы вынести все это добро в сервис.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Браузерное расширение-парсер
22 нояб. 2024, в 20:23
30000 руб./за проект
Анализ и оценка проектов, с последующим запуском
22 нояб. 2024, в 20:20
1000 руб./в час
Разработать админ панель на yii2
22 нояб. 2024, в 19:51
15000 руб./за проект
Ещё заказы