コントローラとコンポーネント間の角度分けデータ

Question

私はプロジェクトで新しく小さな機能を追加しようとしています。

Iは2つのビュー、Cars.htmlとWheels.html

Cars.htmlがコントローラCars.controller.js

Wheels.html私はこれら二つのコントローラ間で通信するコンポーネントWheels.component.js

を有するを有するを有します。私はそれらをお互いに直接注入しようとしましたが、それはたくさんの「プロバイダエラー」を引き起こします。研究を通じて

オンライン、私が私のコントローラとコンポーネントによって注入されます「サービス」を必要とするように...そして、私は関数は、2つの間で通話を行うことができそうです。これを行うとプロバイダのエラーは解決されますが、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; 

第三に、プロバイダエラーは、サービス名を誤った綴りによって引き起こされていないことを確認してください。