Javascript 控制器和组件之间的角度共享数据

我是一个项目的新手，正在尝试添加一个小功能

我有两个视图，

Cars.html

和

Wheels.html

Cars.html有一个控制器

Cars.controller.js

Wheels.html有一个组件

Wheels.component.js

我想在这两个控制器之间进行通信。我曾尝试直接将它们注入彼此，但这会导致一系列“提供者错误”

通过在线研究，我似乎需要一个由我的控制器和组件注入的“服务”。。。然后我可以在两者之间进行函数调用。这样做可以解决提供程序错误，但我似乎无法访问

howdogethere

函数

下面是它们的样子：

Cars.controller.js

angular.module('Cars')
  .controller('CarsCtrl', CarsCtrl);

CarsCtrl.$inject = ['PartsViewModel'];
function CarsCtrl(PartsViewModel) {
  var ctrl = this;

  // This will fail
  ctrl.goToParts = PartsViewModel.howDoIgetHere();

};

angular.module('Cars')
  .component('wheels', {
    bindings: { wheel: '=' },
    controller: 'WheelsCtrl',
    templateUrl: 'path/to/component/Cars/Wheels/Wheels.component.html'
  })
  .controller('WheelsCtrl', WheelsCtrl);

WheelsCtrl.$inject = [];
function WheelsCtrl() {
  var ctrl = this;

  // This will fail
  ctrl.goToParts = PartsViewModel.howDoIgetHere();

}

angular.module('Cars')
  .factory('PartsViewModel', partsViewModelFactory);

partsViewModelFactory.$inject = ['Some', 'injected', 'Dependencies'];
function partsViewModelFactory(Some, injected, Dependencies) {
  return PartsViewModel;

  function PartsViewModel(part) {

    this.howDoIgetHere = function() {
      console.log('Success! From Cars controller or Wheels component.')
    };

  }
}

Wheels.component.js

angular.module('Cars')
  .controller('CarsCtrl', CarsCtrl);

CarsCtrl.$inject = ['PartsViewModel'];
function CarsCtrl(PartsViewModel) {
  var ctrl = this;

  // This will fail
  ctrl.goToParts = PartsViewModel.howDoIgetHere();

};

angular.module('Cars')
  .component('wheels', {
    bindings: { wheel: '=' },
    controller: 'WheelsCtrl',
    templateUrl: 'path/to/component/Cars/Wheels/Wheels.component.html'
  })
  .controller('WheelsCtrl', WheelsCtrl);

WheelsCtrl.$inject = [];
function WheelsCtrl() {
  var ctrl = this;

  // This will fail
  ctrl.goToParts = PartsViewModel.howDoIgetHere();

}

angular.module('Cars')
  .factory('PartsViewModel', partsViewModelFactory);

partsViewModelFactory.$inject = ['Some', 'injected', 'Dependencies'];
function partsViewModelFactory(Some, injected, Dependencies) {
  return PartsViewModel;

  function PartsViewModel(part) {

    this.howDoIgetHere = function() {
      console.log('Success! From Cars controller or Wheels component.')
    };

  }
}

PartsViewModel.service.js

angular.module('Cars')
  .controller('CarsCtrl', CarsCtrl);

CarsCtrl.$inject = ['PartsViewModel'];
function CarsCtrl(PartsViewModel) {
  var ctrl = this;

  // This will fail
  ctrl.goToParts = PartsViewModel.howDoIgetHere();

};

angular.module('Cars')
  .component('wheels', {
    bindings: { wheel: '=' },
    controller: 'WheelsCtrl',
    templateUrl: 'path/to/component/Cars/Wheels/Wheels.component.html'
  })
  .controller('WheelsCtrl', WheelsCtrl);

WheelsCtrl.$inject = [];
function WheelsCtrl() {
  var ctrl = this;

  // This will fail
  ctrl.goToParts = PartsViewModel.howDoIgetHere();

}

angular.module('Cars')
  .factory('PartsViewModel', partsViewModelFactory);

partsViewModelFactory.$inject = ['Some', 'injected', 'Dependencies'];
function partsViewModelFactory(Some, injected, Dependencies) {
  return PartsViewModel;

  function PartsViewModel(part) {

    this.howDoIgetHere = function() {
      console.log('Success! From Cars controller or Wheels component.')
    };

  }
}

Cars.html

<div>
  <button ng-click="ctrl.goToParts()"></button>
</div>

<div>
  <button ng-click="$ctrl.goToParts()"></button>
</div>

Wheels.html

<div>
  <button ng-click="ctrl.goToParts()"></button>
</div>

<div>
  <button ng-click="$ctrl.goToParts()"></button>
</div>

---

首先，在控制器中，它应该是this.goToParts=PartsViewModel（）.howdogethere

其次，在您的服务中，return语句应该在函数声明之后

编辑：抱歉，我误读了导致提供程序错误的原因

编辑2：

如果您试图访问相同的数据集，那么每次都会创建PartsViewModel的一个新实例，这是不符合目的的

将partsviewmodel服务更改为：

angular.module('mymodule').service('PartsViewService', PartsViewService);

 function PartsViewService(){
        var howDoIGetHere = function(){
            Console.log('here');
        };
        return {
            howDoIGetHere : howDoIGetHere
        }
    }

然后在访问控制器中的注入服务时

this.goToParts = PartsViewService.howDoIGetHere;

---

第三，确保提供程序错误不是由拼写错误的服务名称引起的。

ctrl

是对我的控制器中此的引用，因此这不是问题所在。删除

howdogethere（）

后的括号没有任何作用。保留它会给我一个错误：“PartsViewModel.howdogethere（）不是一个函数”。我明白这一点。这两种方式都没有区别。通过将括号留在函数中，您可以将ctrl.goToParts设置为函数的返回值。所以我应该去掉括号？如果是这样的话，我如何在没有括号的情况下调用函数呢？

PartsViewModel

中还有大约15个其他函数属性，我刚刚发布了一个简单的示例。我想这就是我们返回整个函数而不是单个属性的原因。所以这种回击方式对我不起作用。不过，感谢您的更新，我很感激，就像我说的，如果您希望跨多个控制器访问相同的数据，那么您要么需要某种类型的单例，要么需要一个单独的第二个服务来保存要访问的对象实例的数据。还有其他函数属性与返回样式无关，只是它需要位于函数声明之后。