Question

这是通过使用服务而不是工厂解决的，如@Incognos提供的plunker：http://plnkr.co/edit/uh23lrXz2mI4ukvJvxws?p=preview所述。接受的回答是@Tomislav，因为他第一次提到使用服务。

我已经创建了一个控制器来处理商店项目，它们就像这样存储（删除重复以节省空间）：

'use strict';

angular.module('angularStoreApp')
  .controller('storeCtrl', function($scope){
    $scope.product = {
      items: [
        {
          qty: 0,
          stock: 5,
          price: 99.00,
          name: 'Almond Toe Court Shoes, Patent Black',
          category: 'Womens Footerwear'
        }
      ]
    };
  });

我需要创建一个服务来保存这些数据，以便可以从另一个视图/控制器访问它。（这将是最后的购物车页面）。我试图使用.factory，然后在控制器$ scope.products = serviceName.items;但无济于事。我也通过控制器注入了服务。我给了$ injector：modulerr错误。

为了澄清，我创建的服务就是这个

var app = angular.module("angularStoreApp", []);

app.factory("StoreService", function() {
  var products = {
    items: [
      {
        qty: 0
      }
    ]
  };
  return products;
});

控制器就是这样：

'use strict';

angular.module('angularStoreApp')
      .controller('storeCtrl', function($scope, StoreService){
    $scope.product = StoreService.items;
  });

我坚持如何将我的数据从原始控制器放入服务，然后将服务注入控制器再次显示项目。要注意，不使用服务，数据在视图中完全显示。

Answer 1

不要使用工厂，创建一个始终是单身的服务并保存您的数据：

var app = angular.module('angularStoreApp',[]);

app.service('StoreService',function(){

  var products={
    items:[]
  };

  this.save=function(item){
    products.items.push(item);
  };

  this.get=function(){

    return products;

  };
});

将其注入控制器：

app.controller('storeCtrl',function($scope,StoreService){

  var item={qty:0}

  StoreService.save(item);

  $scope.product=StoreService.get();

  console.log($scope.product);

});

因为服务是单身，所以在整个应用中它是全球性的。您可以将它注入任何控制器，它将记住您保存的值。

Answer 2

使用服务从上到下的应用程序：

// main.js
var app = angular.module('app', [])
.controller('buyerCtrl', function($scope, StoreService) {
  $scope.items = StoreService.items();
  $scope.buyMe = function(item) {
    StoreService.add(item);
  };
})

.service("StoreService", function() {
  var products = [];
  var items = [{
    qty: 0,
    stock: 5,
    price: 99.00,
    name: 'Almond Toe Court Shoes, Patent Black',
    category: 'Womens Footerwear'
  }, {
    qty: 0,
    stock: 5,
    price: 99.00,
    name: 'Black Lace Shoes, Patent Black',
    category: 'Mens Footerwear'
  }];
  this.items = function() {
    return items;
  };
  this.add = function(product) {
    products.push(product);
  };
  this.count = function() {
    return products.length;
  };
  this.cart = function() {
    return products;
  };
})

.controller('cartCtrl', function($scope, StoreService) {
  $scope.cart = StoreService.cart();
  $scope.cartCount = StoreService.count();
});

请参阅Plunkr（更新了plunker以显示多个文件）

Answer 3

试试这个，

angular.module('angularStoreApp')
      .controller('storeCtrl', function($scope, StoreService){
        $scope.product = StoreService;
      });

但请确保您的应用仅初始化一次。

var app = angular.module("angularStoreApp", []);

这一行，之后，应该是，

angular.module("angularStoreApp");

Answer 4

只需在每个消费控制器中直接引用服务的公开item集合，并直接操作参考。

以下示例使用此模式和两个控制器来演示行为：

＆＃13;

var module = angular.module('myapp', []);
 
module.service('StoreService', function(){
 this.items = 
   [
        {
          qty: 0,
          stock: 5,
          price: 99.00,
          name: 'Almond Toe Court Shoes, Patent Black',
          category: 'Womens Footerwear'
        }
      ] 
   ;
});
         
      
module.controller('element1Controller', function($scope, StoreService){
  $scope.items = StoreService.items;
  
  $scope.add = function(){
    
    $scope.items.push({
          qty: 2,
          stock: 10,
          price: 9.00,
          name: 'Random Item',
          category: 'Womens Footerwear'
        });
              

}
});

module.controller('element2Controller', function($scope, StoreService){
  $scope.items = StoreService.items;
});

＆＃13;

<html ng-app='myapp'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="element1Controller">
  Controller 1<br />
  {{items}}
  <br />
  <button ng-click='add()'>Add Item to Cart</button>
  
</div>

  <br />

  <div ng-controller="element1Controller">
  Controller 2<br />
  {{items}}
</div>
</html>

＆＃13;

Angular.js服务

4 个答案: