[英]AngularJS UI Not updating after $.ajax Success
I'm new to AngularJS and I'm trying to modify the example at http://www.codeproject.com/Articles/576246/A-Shopping-Cart-Application-Built-with-AngularJS 我是AngularJS的新手,并且尝试在http://www.codeproject.com/Articles/576246/A-Shopping-Cart-Application-Built-with-AngularJS上修改示例
I've implemented a new payment service in the example to call a Json method on my server which works fine, but when I call the method clearItems(); 我在示例中实现了新的支付服务,以在服务器上调用Json方法,该方法运行良好,但是当我调用方法clearItems()时; to remove the items from the cart on success it removes the items as expected in the background (as I can see from refreshing the page and the cart it empty) - my problem is that it does not clear the cart in the UI (without refreshing)
要成功从购物车中删除商品,它会按预期在后台删除商品(正如我从刷新页面中看到的那样,购物车中的商品为空)-我的问题是它无法在UI中清除购物车(无需刷新)
If I call this.clearItems(); 如果我调用this.clearItems(); after the Json call it clears the cart items in the UI as expected, but this is not what I requiquire as I only want to clear the items after success.
在Json调用之后,它按预期清除了UI中的购物车项目,但这不是我所需要的,因为我只想在成功后清除项目。
Can anyone suggest how I can get this to work? 谁能建议我如何使它工作?
My Json call is listed below 我的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();
Thanks 谢谢
Mark 标记
EDIT - Problems running $http 编辑-运行$ http时出现问题
Further to the advice form marck I understand that to do this I need to use $http instead of $json. 除了建议形式marck,我知道要执行此操作,我需要使用$ http而不是$ json。 The problem with doing this is that I need to do this in the shoppingCart.js class (as part of the payments section) which is attached to the controller via app.js (code below).
这样做的问题是,我需要在通过app.js(下面的代码)附加到控制器的shoppingCart.js类(作为付款部分的一部分)中进行此操作。 When I try this though I get a JS error that $http doesn't exist.
当我尝试此操作时,虽然出现了JS错误,但$ http不存在。
Is there a way to use $http from the shoppingCart.js class? 有没有办法使用shoppingCart.js类中的$ http?
app.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 controller.js
function storeController($scope, $http, $routeParams, DataService) {
// get store and cart from service
$scope.store = DataService.store;
$scope.cart = DataService.cart;
shoppingCart.js 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) {
});
}
To make your approach work, you need to inject $http into your controller, then pass it further to the function you've defined in shoppingcart.js, like so in controller.js: 为了使您的方法可行,您需要将$ 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);
}
Obviously, the first two arguments I sent to checkoutCash are filler and need to be replaced with more appropriate values. 显然,我发送给checkoutCash的前两个参数是填充器,需要用更合适的值替换。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.