Question

阅读angular docs about services，我的印象是，在注入服务时，会创建一个像实例这样的新javascript对象，修改一个实例不会影响其他实例。好像我弄错了。见my plunker。我希望当按下Alert Foo contrller name时，我会看到foo/getFoo而不是bar/getFoo。

解释为什么它会像这样工作，可能的解决方法将不胜感激。

我想将普通的javascript对象重写为angularjs服务。这是一个具有GET，POST等方法的restApi服务，但它现在实现的方式是该服务的Controller部分在工厂外部设置，对于所有REST方法，只有方法名称和参数通过。我想保留这种方法。

谢谢！

Answer 1

这正是发生的事情。看到这一行：

restApiService.setControllerName(...);

在两个服务中都被调用：fooController和barController（这些服务名称很糟糕）。因为restApiService被实例化一次，所以当实例化服务时，你实际上会改变相同的restApiService两次，从而导致不良行为。

以下是更好定义服务的示例：

＆＃13;

var app = angular.module('plunker', []);
app.service('restApiService', function() {
  var that = this;

  this.alertControllerName = function(controllerName) {
    alert(controllerName);
  }
});

app.factory('fooController', function(restApiService) {
  var controllerName = 'foo';
  return {
    alertControllerName: function() {
      restApiService.alertControllerName(controllerName);
    }
  }
});

app.factory('barController', function(restApiService) {
  var controllerName = 'bar';
  return {
    alertControllerName: function() {
      restApiService.alertControllerName(controllerName);
    }
  }
});

app.controller('MainCtrl', function($scope, fooController, barController) {
  
  $scope.alertFoo = fooController.alertControllerName;
  $scope.alertBar = barController.alertControllerName;
});

＆＃13;

<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button ng-click="alertFoo()">Alert Foo controller name</button>
    <button ng-click="alertBar()">Alert Bar controller name</button>
  </body>

</html>

＆＃13;

Answer 2

了解AngularJS工厂，服务和提供商

所有这些都用于共享可重用的单例对象。它有助于在您的应用程序/各种组件/模块之间共享可重用的代码。

懒惰实例化 - Angular仅在应用程序组件依赖它时实例化服务/工厂。

单身人士 - 每个组件   依赖于服务获取对单个实例的引用   由服务工厂生成。


-- AngularJS Developer Guide - Services

服务属性覆盖

2 个答案: