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

Question

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

我有 2 个视图， Cars.html和Wheels.html

Cars.html 有一个控制器Cars.controller.js

Wheels.html 有一个组件Wheels.component.js

我想在这两个控制器之间进行通信。 我曾尝试将它们直接相互注入，但这会导致一堆“提供程序错误”。

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

这是它们的样子：

汽车控制器.js

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

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

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

};

轮子组件.js

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();

}

PartsViewModel.service.js

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.')
    };

  }
}

汽车.html

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

轮子.html

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

Answer 1

首先，在你的控制器中它应该是this.goToParts = PartsViewModel().howDoIgetHere;

其次，在您的服务中，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;

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