简体   繁体   English

$ .ajax成功后,AngularJS UI不更新

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM