Question

在我的小型购物角度应用程序中，我试图发送我添加到购物车的产品的详细信息，然后我想向其他控制器显示产品的详细信息。我用过服务但是当我调试它时返回空数组。我有两个控制器： productlistcontroller.js：

    app.controller("productListCtrl", function ($scope, $filter, productListActiveClass, productListPageCount, productListService) {
$scope.addProductToCart = function (product) {
            $scope.cartArr = addProduct(product.ProductId, product.name, product.price);
            productListService.save($scope.cartArr);
        }
})

checkoutcontroller.js：

app.controller("cartSummaryController", function ($scope, productListService) {
    $scope.cartData = productListService.getCartdata();
});

service.js

app.service("productListService", function ()
{
    var cartArray = [];
    this.save = function (cartArray) {
        this.cartArray = cartArray;
    }
    this.getCartdata = function () {
        return cartArray;
    }
})

我无法使用cartArray服务。谢谢你的帮助。

Answer 1

除了Satpal描述的问题之外，代码中还有另一个问题：您在创建cartSummaryController时要求＆＃39; productListService.getCartdata（）＆＃39; 。但实际值将在稍后设置（可能基于用户输入）。

因此，您需要向服务添加一些发布机制，以便通知其他人/订阅者数据的更改。或者，您可以从 .getCartdata（）返回一个对象。当您从保存获取数据时，您将填充过去已返回的对象。

编辑添加了稍加修改的代码，以展示它的工作方式：

＆＃13;

var app = angular.module("app",[]);

app.controller("productListCtrl", function ($scope, productListService) {
  $scope.addProductToCart = function (product) {
    productListService.save($scope.data);
  }
});

app.controller("cartSummaryController", function ($scope, productListService) {
    $scope.container = productListService.getCartdata();
});

app.service("productListService", function ()
{  
    var container = {cartData: []};
    this.save = function (name) {
        container.cartData.push(name);
    };
    
    this.getCartdata = function () {
        return container;
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="productListCtrl">
    Product Controller - type text and click 'addToCart':
    <br/>
    <input type="text" ng-model="data" />
    <input type="button" value="addToCart" ng-click="addProductToCart()">
  </div>
  <div ng-controller="cartSummaryController">
      CartData - updates automatically:
    <ul>
      <li ng-repeat="entry in container.cartData">
        {{entry}}
      </li>
    </ul>
  </div>
</body>

＆＃13;

通过这种方式，您可以将container.cartArray绑定到请求控制器中的html，并且只要调用 save ，它就会更新。

Answer 2

问题是，只有在加载控制器后才调用getCartdata方法，而不是在数据更改时调用。而是将指向服务功能的指针传递给控制器

替换：

$scope.cartData = productListService.getCartdata();

在：

$scope.cartData = productListService.getCartdata;

在您看来，您可以执行以下操作：

<div ng-repeat="item in cartData()">{{item}}</div>

这样您就可以获得更新的数据。

无法在angularjs中将数据从服务发送到控制器

2 个答案: