Data only displayed after refresh AngularJS

Question

I'm using plain controller to make cart system and $ngcookies. Everything works but the only thing that My Data (.name) only displayed at cart after browser refresh/reload, to be honest main HTML and Cart.html in different controller/view ($ngroute). Is there any mistake i made to fix this? Any help will be appreciated.

I want my data displayed (live) on click instead of after Refresh

HTML

<div ng-controller="AliceController" class="talent-container">

<div ng-repeat="talent in talents">

<button type="button" href="#" ng-click="addItemToCart(talent)"></button>

<div id="name">{{talent.name}}</div>

</div>

</div>

cart.html

<div>
    <ul class="userset" ng-show="cart.length !== 0">
        <li ng-repeat="c in cart">
            <h6>{{c.name}}</h6>
        </li>
    </ul>
</div>

Module

var alice = angular
        .module('alice', ['ngRoute', 'angular-carousel', 'ngTouch', 'angular-carousel.shifty', 'ngCookies'])

Controller

.controller('AliceController', ['$scope', '$http', '$location', '$cookies', function ($scope, $http, $location, $cookies) {

            $http.get('api.php').
            then(function (res) {
                $scope.talents = res.data.talents;

                // cart

                $scope.cart = [];
                $scope.total = 0;

                if (!angular.isUndefined($cookies.get('total'))) {
                    $scope.total = parseFloat($cookies.get('total'));
                }
                //Sepetimiz daha önceden tanımlıysa onu çekelim
                if (!angular.isUndefined($cookies.get('cart'))) {
                    $scope.cart = $cookies.getObject('cart');
                }
                $scope.addItemToCart = function (talent) {

                    if ($scope.cart.length === 0) {
                        talent.count = 1;
                        $scope.cart.push(talent);
                    } else {
                        var repeat = false;
                        for (var i = 0; i < $scope.cart.length; i++) {
                            if ($scope.cart[i].id === talent.id) {
                                repeat = true;
                                $scope.cart[i].count += 1;
                            }
                        }
                        if (!repeat) {
                            talent.count = 1;
                            $scope.cart.push(talent);
                        }
                    }
                    var expireDate = new Date();
                    expireDate.setDate(expireDate.getDate() + 1);
                    $cookies.putObject('cart', $scope.cart, {
                        'expires': expireDate
                    });
                    $scope.cart = $cookies.getObject('cart');

                    $cookies.put('total', $scope.total, {
                        'expires': expireDate
                    });
                };


                    $cookies.put('total', $scope.total, {
                        'expires': expireDate
                    });

                };

            });

index.php

<body ng-app="alice">

    <div ng-view></div> <!-- Goes to main.html using route-->
</body>

Header.html

<div ng-include src="'view/cart.html'">

**cart.html** is in which scope? I mean what's the controller/ng-congtroller of **cart.html** — Ronit Mukherjee, Nov 30 '17 at 02:53
@RonitMukherjee cart.html is not in any scope/controller. it is just a page from ng-include. But in cart.html i put ng-controller="AliceController" in the parent div. — Andre Ramadhan, Nov 30 '17 at 02:57
I guess as you are mentioning the ng-controller again for cart.html, it re-runs the controller code again, due to which `the $scope.cart = []; $scope.total = 0;` runs again and value resets. Try printing something in the console. Hope you will see the message twice. Let me know. — Ronit Mukherjee, Nov 30 '17 at 03:00
@RonitMukherjee it was only print 1 string `console.log('apakek');' . When i remove controller in the cart.html there are no data displayed even if i reload the browser. — Andre Ramadhan, Nov 30 '17 at 03:05
Can you please share the HTML part also? where you have included cart.html — Ronit Mukherjee, Nov 30 '17 at 03:11
@RonitMukherjee i eddited the code i post, so it was ng-view > main.html (ng-include header.html) > ng-include cart.html — Andre Ramadhan, Nov 30 '17 at 03:17
@RonitMukherjee nevermind, i got it, the problem was too much ng-include and not in one parents with ng-controller. I fixed the html, and post the answer bellow. Thank You Ron — Andre Ramadhan, Nov 30 '17 at 11:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160189/discussion-between-ronit-mukherjee-and-andre-ramadhan). — Ronit Mukherjee, Nov 30 '17 at 11:32

score 0 · Answer 1 · answered Nov 30 '17 at 11:31

Turns out the solution was combining the cart markup to the same page with the controller, thanks to Ronit Mukherjee for the concern and the inspiration.

Complete Html code

<div>
    <ul class="userset" ng-show="cart.length !== 0">
        <li ng-repeat="c in cart">
            <h6>{{c.name}}</h6>
        </li>
    </ul>
</div>

<div ng-repeat="talent in talents">

<button type="button" href="#" ng-click="addItemToCart(talent)"></button>

<div id="name">{{talent.name}}</div>

</div>

</div>

Data only displayed after refresh AngularJS

1 Answers1