M
M
Maxim2014-11-30 21:20:21
JavaScript
Maxim, 2014-11-30 21:20:21

A couple of things in angular do not work for me, how to fix it?

I'm trying to learn angular, experimenting ...
Jambs that I can't fix in any way:
1. When you click on "order", the product is added to the array, but the "order amount" is not updated (if you do not output an html file through a directive, but use ngSwitch, then works).
2. The search does not work, I can’t understand what the problem is, everything seems to be correct and it works without ngSwitch.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
_
_ _, 2014-11-30
@might

As for the fact that when you click "Order" it is added to the array, but the order amount is not recalculated:
You have mainController declared on the body, and then declared in my-directive.
At the beginning of mainController , you create a new reference to the orderList array in the scope, totalPrice() is called on the scope of the second mainController instance, while adding the product takes place in the array declared in the scope of the first mainController instance, and these are two different arrays.
And you cannot remove the controller declaration from the directive, because for the directive you are requesting an isolated scope, which, of course, the totalPrice () function from the scope declared on the body does not fall into.
You need to thoroughly understand first how scopes work in AngularJS, and then learn about controller as.
PS I won't say anything about the architecture of the application, I didn't ask.
You ran into a problem because you hardcoded business logic in your controllers. This is an obvious architectural flaw. After removing it, everything will start working as it should. You need to move the work with the basket to a separate service:

module.service('Cart', function($rootScope, localStorageService){
    var 
        currencies = {rub: 10800, usd: 1}, 
        cartTotal = 0, 
        cartItems = localStorageService.get('zakaz') || [];

    function updateCartTotal(){
        var _total = 0;
        angular.forEach(cartItems, function(item){
            _total += item.price;
        });
        cartTotal  = _total;   
    }

    this.getTotal = function(currency){
        var currency = currency || 'usd';
        return cartTotal * (currencies[currency] || 1);  
    }
    this.addItem = function(item){
        cartItems.push(item);
        updateCartTotal();
        $rootScope.$broadcast('cart:updated', {cartSize: cartItems.length});       
    }
    this.removeItem = function(item){
        var idx = cartItems.indexOf(item);
        if(idx > -1){
            cartItems.splice(idx,1);
            updateCartTotal();
            $rootScope.$broadcast('cart:updated', {cartSize: cartItems.length});       
        }
    }
    this.isItemAddedAlready = function(item){
        return cartItems.indexOf(item) > -1; 
    };
    this.clear = function(){
        cartItems.length = 0;
        cartTotal = 0;
        $rootScope.$broadcast('cart:updated', {cartSize: cartItems.length});   
    }
    this.getItems = function(){
        return cartItems;
    }
});

Note: indexOf is currently used to find an element in an array.
It will only work when the cart is initialized with an empty array, because in that case the same references will be used when adding and removing elements and the reference equality will roll over. For normal operation, you need to either write a crutch for searching by ID, or use underscore or lodash.
Now you connect this service to controllers via DI and use its methods wherever necessary.
In order to update the amount and size of the basket, do:
$scope.$on('cart:updated', function(event, info){
    $scope.cartTotal = Cart.getTotal(currency);
    $scope.cartSize = info.cartSize;
});

We could store a link to the service function in our controller and call it in the template, like {{getTotal(currency)}}, but we shouldn’t do this, because this is an extra loaded watcher. Now, of course, you won’t feel it, but you should always remember about such moments. Therefore, we subscribed to the cart event and when the cart changes, we pull out the necessary information.
Rewrite the code using the service and see how it changes for the better. Well, as far as the convenience of automated testing, I think it makes no sense.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question