Question

我有两个控制器注入一个服务和一个工厂。根据我的知识，如果我们改变服务数据，它应该反映在整个应用程序中，但这不应该与工厂有关。

我的要求

服务：

服务是单身，所以如果我在Service对象中进行了更改，应该反映出整个应用程序。

对于工厂：

工厂只是返回功能的函数，如果我在工厂对象中进行了更改，它应该只反映当前实例而不是整个应用程序

我创建了一个应用程序，其中我使用了两个不同的控制器，它们注入了相同的服务和工厂，它们具有两个属性。

当我更改服务属性时，它不会在其他控制器中更新。

以下是Plunker上的代码。

任何人都可以提供帮助，并提供代码，其中服务将反映数据，但工厂不反映。感谢

(function() {
  'use strict';

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

  app.factory('MyFactory', function() {
    var myFactory = {};

    myFactory.myProperty = { myText: 'Hello' };
    myFactory.setProperty = function(value) {
      this.myProperty.myText = value;
    };
    return myFactory;
  });

  app.service('MyService', function() {
    this.myProperty = { myText: 'Test'} ;
    this.setProperty = function(value) {
      this.myProperty.myText = value;
    }
  });

  app.controller('DummyController', DummyController);
  DummyController.$Inject = ['$scope', 'MyFactory', 'MyService'];

  app.controller('Dummy1Controller', Dummy1Controller);
  Dummy1Controller.$Inject = ['$scope', 'MyFactory', 'MyService'];



  function DummyController($scope, MyFactory, MyService) {
    $scope.property = MyFactory.myProperty;
    $scope.property1 = MyService.myProperty;

  }

  function Dummy1Controller($scope, MyFactory, MyService) {
    MyFactory.setProperty('World1144');
    $scope.property = MyFactory.myProperty;

    MyService.setProperty('World1144');
    $scope.property1 = MyService.myProperty;
  }
})();

和HTML的相关部分

<div class="panel-body">
  <div ng-controller='DummyController' class='col-md-6'>
    <form class="form-inline" role="form">
      DummyController
      <div>
        Current Factory Value :
        <input type='text' ng-model='property.myText'>
        <br> Current Service Value :
        <input type='text' ng-model='property1.myText'>

      </div>
    </form>
  </div>
  <hr>
  <div ng-controller='Dummy1Controller' class='col-md-6'>
    <form class="form-inline" role="form">
      Dummy1Controller
      <div>
        Current Factory Value :
        <input type='text' ng-model='property.myText'>
        <br> Current Service Value :
        <input type='text' ng-model='property1.myText'>
      </div>
    </form>
  </div>
</div>

Answer 1

问题在于你对普通字符串进行绑定，而在javascript这些赋值（你在控制器中创建的那些）是按值而不是按引用进行的。要解决您的问题，请改为使用服务中的对象。

请参阅此分叉plunkr，它正如您所期望的那样工作。

更改

在Javascript中

我定义了您的工厂和服务以使用对象。然后，您可以像以前一样在控制器中绑定此对象。

app.factory('MyFactory', function() {
    var myFactory = {};

    myFactory.myProperty = { myText: 'Hello' };
    myFactory.setProperty = function(value) {
      this.myProperty.myText = value;
    };
    return myFactory;
  });

  app.service('MyService', function() {
    this.myProperty = { myText: 'Test'} ;
    this.setProperty = function(value) {
      this.myProperty.myText = value;
    }
  });

现在看到，您公开了一个对象，而不是一个普通的字符串。可能现在setter没用，因为你可以直接更新对象。如果您想添加一些额外的逻辑或验证，可以保留它。

在HTML中

我更新了ng-model绑定

<div>
  Current Factory Value :
  <input type='text' ng-model='property.myText'>
  <br> Current Service Value :
  <input type='text' ng-model='property1.myText'>
</div>

Answer 2

如果我们更改服务数据，它应该反映在整个应用程序中，但这不应该出厂。

工厂部件不正确。

角度工厂比服务更强大，但大部分时间你用工厂做的事情已经被服务所覆盖。

这是主要区别。

a service是一个单例，传递给服务的函数被视为构造函数，每次请求该服务时，Angular都会对该对象进行缓存并返回它angular注入SAME实例。

一个factory它是一个函数，它第一次注入角度调用该函数并缓存结果。作为一个函数，你可以使它返回一个实例或一个函数本身。如果你返回一个实例，你将拥有与服务相同的模式，而如果你返回一个函数（构造函数），你可以构造多个实例。

返回你的plnkr ，以及有罪的部分。

这里：

app.service('MyService', function() {
  this.myProperty = 'Test';
  this.setProperty = function(value) {
    this.myProperty = value;
  }
});

function DummyController($scope, MyFactory, MyService) {
    $scope.property = MyFactory.myProperty;
    $scope.property1 = MyService.myProperty;

  }

myProperty是一个字符串，并且它将在第一个赋值中被复制的所有原始类型，它不是引用，这意味着没有与原始值绑定，解决方案将它包装在一个对象中。同样的工厂。

工作plnkr ：http://plnkr.co/edit/rQvzjfB0YO4peulimivc?p=preview

更改的服务值未在AngularJS中的第二个控制器中反映

2 个答案: