Question

我是AngularJS的新手，我正试图修改http://www.codeproject.com/Articles/576246/A-Shopping-Cart-Application-Built-with-AngularJS上的示例

我在示例中实现了一个新的支付服务，在我的服务器上调用Json方法，但是当我调用方法clearItems（）;成功时从购物车中删除商品，它会在后台按预期删除商品（正如我从刷新页面和购物车中看到的那样） - 我的问题是它没有清除UI中的购物车（没有刷新）

如果我调用this.clearItems（）;在Json调用之后，它会按预期清除UI中的购物车项目，但这不是我要求的，因为我只想在成功后清除这些项目。

有人可以建议我如何让它发挥作用吗？

我的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();

由于

马克

编辑 - 运行$ http的问题

继marck的建议表格之后，我明白为了做到这一点，我需要使用$ http而不是$ json。这样做的问题是我需要在shoppingCart.js类（作为支付部分的一部分）中通过app.js（下面的代码）连接到控制器。当我尝试这个但是我得到一个JS错误，$ http不存在。

有没有办法从shoppingCart.js类中使用$ http？

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

要使您的方法有效，您需要将$ 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);

}

显然，我发送给checkoutCash的前两个参数是填充符，需要用更合适的值替换。

AngularJS UI $ .ajax成功后不更新

1 个答案: