Как обновить controller на AngularJS?

Question

[Турар Абу]

У меня имеется контроллер для корзины:

app.controller("cartItems", function($scope, $http){
  $http.get("/cart.json").success(function(data) { $scope.all = data });
});

и HTML код самой корзины:

<div class="item" ng-repeat="item in all">
      <i class="delete icon-trash" data-id="{{ item.id }}"></i>
      <img class="img" ng-src="{{ item.img }}" alt="">
      <p class="name">{{ item.name }}</p>
      <p class="info">{{ item.desc }}</p>

      <span class="price">{{ item.price }}
        <i class="icon-q"></i>
      </span>
    </div>

Корзина - это фиксированный блок в центре экрана. В самом начале он невидим. При добавлении в корзину одного товара, с начала он отправляет действие на сервер. Дальше, он должен обновить данные от $http, перерисовать DOM корзины и показать блок корзины.

Вопрос: Как можно реализовать это при клике?

Answer 1

[Дмитрий Кравченко]

app.controller("cartItems", function($scope, $http){

  $scope.clickHandler = function(){
    $http.get("/cart.json").success(function(data) { $scope.all = data });
  }
});

<button ng-click="clickHandler()">Click me</buton>

Answer 2

[Valeriy Donika]

$scope.all.push(data);

Comments

[Турар Абу]

А можно по конкретнее? Как это сделать в атрибуте onclick?

[Valeriy Donika]

ну, в респонсе http там где у вас "success"(смотрите доку https://docs.angularjs.org/api/ng/service/$http)

// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
тут получили удачный респонс и пихаем респонс в листинг
$scope.all.push(response.data);

}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});