控制器和組件之間的角度共享數據

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;

第三，確保提供者錯誤不是由您拼錯服務名稱引起的。