Eckdaten zwischen Controllern und Komponenten

Question

Ich bin neu in einem Projekt und versuche, ein kleines Feature hinzuzufügen.

Ich habe 2 Ansichten, Cars.html und Wheels.html

hat Cars.html einen Controller Cars.controller.js

Wheels.html eine Komponente Wheels.component.js

Ich möchte, zwischen diesen beiden Steuerungen kommunizieren. Ich habe versucht, sie direkt ineinander zu injizieren, aber das verursacht eine Menge "Provider-Fehler".

Durch Forschung online, scheint es, wie ich einen ‚Dienst‘ müssen die von meinem Controller und Komponente injiziert wird ... dann kann ich Funktionsaufrufe zwischen den beiden machen. Dadurch werden die Providerfehler behoben, aber ich kann nicht auf die howDoIgetHere-Funktion zugreifen. Hier

ist, wie sie aussehen:

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

Zuerst in Ihrem Controller sollte es sein this.goToParts = PartsViewModel().howDoIgetHere;

Zweitens in Ihren Diensten, die return-Anweisung sollte nach der Funktionsdeklaration gehen.

bearbeiten: Sorry, ich habe falsch gelesen, was die Anbieterfehler verursacht hat.

Edit 2:

Wenn Sie denselben Datensatz zugreifen möchten, können Sie den Zweck besiegt haben, indem eine neue Instanz der PartsViewModel Schaffung jedes Mal.

Change The partsviewmodel Service:

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

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

Dann, wenn die injizierte Dienst in Ihrem Controller zugreifen.

this.goToParts = PartsViewService.howDoIGetHere; 

Drittens, stellen Sie sicher, dass der Provider Fehler nicht von Ihnen Rechtschreibfehler den Servicenamen verursacht wird.