AngularJS UI не обновляется после $ .ajax Успеха

Question

Я новичок в AngularJS и я пытаюсь изменить пример на http://www.codeproject.com/Articles/576246/A-Shopping-Cart-Application-Built-with-AngularJS

Я реализовал новую услугу оплаты на примере вызов метода JSon на мой сервер работает нормально, но когда я вызываю метод clearItems(); чтобы удалить предметы из корзины с успехом, он удаляет элементы, как ожидалось, в фоновом режиме (как я вижу, обновляя страницу и корзину) - моя проблема в том, что она не очищает корзину в пользовательском интерфейсе (без обновления)

Если я вызываю this.clearItems(); после вызова Json он очищает элементы корзины в пользовательском интерфейсе, как ожидалось, но это не то, что я требую, поскольку я хочу только очистить элементы после успеха.

Может ли кто-нибудь предложить, как я могу заставить это работать?

Мой Json вызов приведен ниже

var me = this; 
//this.clearCart = clearCart == null || clearCart; 
$.ajax({ 
    cache: false, 
    type: "POST", 
    url: '/pos/JsonCashPayment', 
    contentType: 'application/json', 
    dataType: "json", 
    data: JSON.stringify(this.items), 
    success: function (data) { 
     me.clearItems(); 
     alert('success function called'); 
     // Do something with the returned data 
     // This can be any data 
    } 
}); 

//this.clearItems(); 

Благодарности

Марку

EDIT - Проблемы работы $ HTTP

В дополнение к форме рекомендации Marck Я понимаю, что делать это мне нужно использовать $ http вместо $ json. Проблема с этим заключается в том, что мне нужно сделать это в классе shoppingCart.js (как часть раздела платежей), который подключен к контроллеру через app.js (код ниже). Когда я пытаюсь это, хотя я получаю ошибку JS, что $ http не существует.

Есть ли способ использовать $ http из класса shoppingCart.js?

app.js

var storeApp = angular.module('AngularStore', []). 
config(['$routeProvider', function($routeProvider) { 
$routeProvider. 
    when('/store', { 
     templateUrl: 'POS/store', 
    controller: storeController 
    }). 
    when('/products/:productSku', { 
     templateUrl: 'POS/product', 
    controller: storeController 
    }). 
    when('/cart', { 
     templateUrl: 'POS/shoppingCart', 
    controller: storeController 
    }). 
    otherwise({ 
     redirectTo: '/store' 
    }); 
}]); 

// create a data service that provides a store and a shopping cart that 
// will be shared by all views (instead of creating fresh ones for each view). 
storeApp.factory("DataService", function ($http) { 

// create store 
var myStore = new store($http); 

// create shopping cart 
var myCart = new shoppingCart("AngularStore"); 

controller.js

function storeController($scope, $http, $routeParams, DataService) { 

// get store and cart from service 
$scope.store = DataService.store; 
$scope.cart = DataService.cart; 

shoppingCart.js

function shoppingCart(cartName) { 
this.cartName = cartName; 
this.clearCart = false; 
this.checkoutParameters = {}; 
this.items = []; 

// load items from local storage when initializing 
this.loadItems(); 

// save items to local storage when unloading 
var self = this; 
$(window).unload(function() { 
    if (self.clearCart) { 
     self.clearItems(); 
    } 
    self.saveItems(); 
    self.clearCart = false; 
    }); 
} 

shoppingCart.prototype.checkoutCash = function (parms, clearCart, $scope, $http) { 

// Need to be able to run $http here 
$http({ 
    url: '/pos/JsonCashPayment', 
    method: "POST", 
    data: this.items, 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
}).success(function (data, status, headers, config) { 

}).error(function (data, status, headers, config) { 

}); 

} 

Answer 1

Чтобы сделать свой approac ч работы, вам нужно впрыснуть $ HTTP в контроллер, а затем передать его дальше к функции вы определили в shoppingcart.js, как и в controller.js:

'use strict'; 

// the storeController contains two objects: 
// - store: contains the product list 
// - cart: the shopping cart object 
function storeController($scope, $routeParams, DataService, $http) { 

    // get store and cart from service 
    $scope.store = DataService.store; 
    $scope.cart = DataService.cart; 

    // use routing to pick the selected product 
    if ($routeParams.productSku != null) { 
     $scope.product = $scope.store.getProduct($routeParams.productSku); 
    } 

    $scope.cart.checkoutCash('parms', 'clearCart', $scope, $http); 

} 

Очевидно, что первые два аргумента I отправленные на checkoutCash являются наполнителем и должны быть заменены более подходящими значениями.