Question

我是一个新项目，并试图添加一个小功能。

我有2个观看次数，Cars.html和Wheels.html

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

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

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

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

这是他们的样子：

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

};

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

  }
}

Cars.html

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

Wheels.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;

~~第三，确保错误拼写服务名称不会导致提供程序错误。~~

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

1 个答案: