2017-11-30 5 views
1

Ich benutze den Plain Controller, um das Cart System und $ ngcookies zu erstellen. Alles funktioniert, aber das einzige, was Meine Daten (.name) nur im Warenkorb nach dem Aktualisieren/Neuladen des Browsers angezeigt wird, um ehrlich zu sein, Haupt-HTML und Cart.html in verschiedenen Controller/View ($ ngroute). Gibt es einen Fehler, den ich gemacht habe, um das zu beheben? Jede Hilfe wird geschätzt.Daten werden erst nach der Aktualisierung angezeigt. AngularJS

Ich möchte, dass meine Daten angezeigt (live) auf, klicken Sie statt nach 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> 

Modul

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'"> 
+1

** ** cart.html ist, in welchem ​​Umfang? Ich meine, was ist der Controller/ng-Congregator von ** cart.html ** –

+0

@RonitMukherjee cart.html ist in keinem Bereich/Controller. Es ist nur eine Seite von ng-include. Aber in cart.html habe ich ng-controller = "AliceController" in die Eltern-Div. –

+0

Ich schätze, da Sie den ng-controller wieder für cart.html erwähnen, führt er den Controller-Code erneut aus, wodurch '$ scope.cart = []; $ scope.total = 0; 'wird erneut ausgeführt und der Wert wird zurückgesetzt. Versuchen Sie, etwas in der Konsole zu drucken. Hoffentlich sehen Sie die Nachricht zweimal. Gib mir Bescheid. –

Antwort

0

Es stellte sich heraus, dass die Lösung das Warenkorb-Markup auf derselben Seite mit dem Controller kombinierte, dank Ronit Mukherjee für die Sorge und die Inspiration.

komplette 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> 
Verwandte Themen