Question

我有一个带有以下代码的资源服务

round

我设置了一条路线来编辑像这样的产品

function productResource($resource) {    
return $resource("http://localhost/api/product/:id", null,
{
   'update':{method:'PUT'}
});

我的控制器看起来像这样

  .state("productEdit", 
  {
   abstract: true,
   url: "/products/edit/:id",
   templateUrl: "app/products/productEditView.html",
   controller: "productEditCtrl as vm",
   resolve: {
      productResource: "productResource",
      product: function (productResource, $stateParams) {
        var id = $stateParams.id;
        return productResource.get({id: id}).$promise;
    }
}
})

Web API返回具有以下结构的动态对象

    function productEditCtrl(product,  productResource, $state) {
    var vm = this;
    vm.product=  product;
    if (vm.product.data && vm.product.data.id) {
        vm.title = "Edit: " + vm.product.data.cusip;
    }
    else {
        vm.title = "New product"
    }
    vm.submit = function(){
    vm.product.$save(
            function (data) {
                toastr.success("Save Successful");
            }
        );
    };

webAPI控制器操作如下所示

public class ResponseResult {
public dynamic Data { get; set; }
public HttpStatusCode StatusCode { get; set; }
public bool DataIsValid
}

我的问题是当我调用$ save函数时，它会发送null产品数据，因为$ save绑定到ResponseResult，我需要将产品数据发送回webapi。我不知何故需要将从webapi返回的产品数据绑定到vm.product，所以当我调用vm.product。$ save时，它可以工作。我怎么能这样做？

Answer 1

使用$resource解析状态时，我正在使用以下设置。

我有CustomerService注入解决方案：

angular
    .module("app.customer")
    .factory("CustomerService", CustomerService);

function CustomerService($resource) {
    return $resource("/api/customers/:id", { id: "@customerId" })
}

我的路线配置如下：

.state("customers.details", {
    url: "/{id}/",
    templateUrl: "/app/customers/customers.details.html",
    controller: "CustomersController",
    controllerAs: "vm",
    resolve: {
        customer: function (CustomerService, $stateParams) {
            return CustomerService.get({ id: $stateParams.id });
        }
    }
})

customer已注入CustomersController，允许我在.$save上同时执行.$update和customer。

您的网络API控制器可能如下所示：

[Route("")]
public async Task<IHttpActionResult> Post(CustomerCreateCommand model)
{
    var customer = await customerRepository.InsertAsync(model);

    return Created<CustomerViewModel>("/api/customers/" + customer.Id, MapToViewModel<CustomerViewModel>(customer));
}

在这种情况下，如果您无法控制API且未返回预期的实体，$resource将不会开箱即用。

您面临的问题是您获得的实体类型与您希望发送回API的实体类型不同。您需要打开data字段，因为这是API在执行POST时所期望的。

您可以像下面一样编写提交函数，在其中创建一个新资源，其中vm.product.data的值应映射到服务器productDto类：

vm.submit = function() {
  new productResource(vm.product.data).$save(function () {  
    // saved successfully
  });
};

Angular如何在WebAPI中使用$ save

1 个答案: