Why is ng-click not working?

M

Maxim Nikitin2014-09-10 15:18:57

JavaScript

Maxim Nikitin, 2014-09-10 15:18:57

There is a page which body is displayed by means of Angular JS. On this page, similar code behaves differently. Here's the page (don't bother just yet, you don't need to read the entire code).

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

Here it works:

<a class="btn btn-success" name="addToCartLink" ng-click="productCtrl.addToCart(prod.ProductID)">+ Add to cart</a>

But this is not:

<a name="categoryLink" id="categoryLink" class="list-group-item" ng-click="productCtrl.getProducts('Chess')">Chess</a>

What is the problem - I can not understand at all. It's a shame if in my inattention.
Just in case, here is the JS code:

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

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

L

lqip32, 2014-09-10
@MaxSter

I am not an expert in angular, but why in the description of the controller, you do self.addToCart, but do not write self.getProducts = function(category)?

S

Sergey, 2014-09-10
Protko @Fesor

Fucking sparrows... And now look at my version, take a look at your implementation, and tell me how it's better.

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

Use promises, don't use this stuff with this. You have .bind native and angular.bind.
In particular, the following confuses me:
If you use the methods of this controller somewhere else, then it's time to think about how to bring all this goodness into a service.