2016-07-15 6 views
0

Ich habe einen Controller, der Bestellungen verarbeitet. Es hat die Bestellnummer.Wie übergebe ich Variablen an einen gleichgeordneten Controller

Ich starte ein Formular in einem Dialogfeld, das einen eigenen Controller hat.

Ich muss die Bestellnummer vom PO-Controller in diesem Dialogfeld anzeigen Das dritte Eingabefeld im Dialogfeld. Was ist die richtige/empfohlene Weise, dies zu tun?

Ich versuche mich an Best Practice und den Styling Guide von John Papa zu halten.

Danke.

index.html 
<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.2/js/ngDialog.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.2/css/ngDialog-theme-default.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.2/css/ngDialog.min.css"> 
    <script src="script.js"></script> 
</head> 

<body ng-app="app"> 
    <h1>Hello Plunker!</h1> 
    <div ng-controller="POController as po"> 
    {{po.purchaseOrderNumber}} 
    <button ng-click="po.openDialog()">OPEN DIALOG</button> 
    </div> 


</body> 

</html> 

POLine.html

<div> 
    <div>POLINE</div> 
    <div> 
    <input type="text" ng-model="poline.lineNumber"> 
    </div> 
    <div> 
    <input type="text" ng-model="poline.desc"> 
    </div> 
    <div> 
    <input type="text" ng-model="po.purchaseOrderNumber"> 
    </div> 
    <div></div> 
</div> 

script.js

(function() { 

    angular 
    .module('app', ['ngDialog']) 
    .controller('POController', ['ngDialog', POController]) 
    .controller('POLineController', [POLineController]) 


    function POController(ngDialog) { 
    po = this; 
    po.purchaseOrderNumber = "ORD1234" 
    po.openDialog = openDialog; 

    function openDialog() { 
     ngDialog.open({ 
     template: 'POLine.html', 
     className: 'ngdialog-theme-default', 
     controller: 'POLineController', 
     controllerAs: 'poline' 
     }); 
    } 

    } 

    function POLineController() { 
    poline = this; 

    poline.lineNumber = "POLINE12345"; 
    poline.desc = "THIS IS A DESCRIPTION"; 

    } 


})(); 

Antwort

0

Injizieren in das Dialogfeld Steuerung den Vorsatz Eigenschaft ngDialog.open() verwendet, wie diese :

ngDialog.open({ 
    template: 'POLine.html', 
    className: 'ngdialog-theme-default', 
    controller: 'POLineController', 
    controllerAs: 'poline', 
    resolve: { 
    poNumber: function() { 
     return po.purchaseOrderNumber; 
    } 
    } 
}) 

Dann in POLineController:

function POLineController(poNumber) { 
    poline = this; 

    poline.lineNumber = poNumber; 
    poline.desc = "THIS IS A DESCRIPTION"; 

} 

UPDATE

Hier ist ein Arbeits plunk

+0

Danke für die Hilfe, aber leider habe ich nicht in der Lage, eines dieser Beispiele zu bekommen, nachdem ich es einige Stunden lang versucht hatte. Können Sie den Plünderer aktualisieren? Ich habe es die ganze Nacht erforscht und konnte es nicht erfolgreich funktionieren. Danke nochmal. – McDuff

+0

Danke für Ihre Hilfe. stellt sich heraus, dass das Problem ein dummer war: .controller ('POLineController', [POLineController]); sollte sein. Controller ('POLineController', POLineController); Ihr Plunker sortiert das. Danke – McDuff

0

Der beste Weg, in diesem Szenario auf alle Daten in der Referenz zu übergeben wäre mit der data Eigenschaft . Dadurch können Sie auf die Daten unter Verwendung des Objekts ngDialogData in der Vorlage zugreifen.

script.js

function POController(ngDialog) { 
    po = this; 
    po.purchaseOrderNumber = "ORD1234" 
    po.openDialog = openDialog; 

    var data = { purchaseOrderNumber: po.purchaseOrderNumber }; 

    function openDialog() { 
     ngDialog.open({ 
     template: 'POLine.html', 
     className: 'ngdialog-theme-default', 
     controller: 'POLineController', 
     controllerAs: 'poline', 
     data: data 
     }); 
    } 

    } 

POLine.html

<div> 
    <div>POLINE</div> 
    <div> 
    <input type="text" ng-model="poline.lineNumber"> 
    </div> 
    <div> 
    <input type="text" ng-model="poline.desc"> 
    </div> 
    <div> 
    <input type="text" ng-model="poline.ngDialogData.purchaseOrderNumber"> 
    </div> 
    <div></div> 
</div> 

zum documentation um weitere Informationen zu finden.

+0

Danke für die Hilfe. Ich habe die Dokumentation gelesen und viele Beispiele ausprobiert, aber aus irgendeinem Grund kann ich das nicht mit einer dieser Methoden erreichen. Ich kann es funktionieren lassen, ohne diese Funktionen zu verwenden, indem ich einen Dienst verwende, um die Variablen zu übergeben, aber ich möchte, dass diese App am besten funktioniert und diese Methoden "legitimer" erscheinen als der Shared Service Pfad. – McDuff

+0

@McDuff - Ich habe ein Plunk aus Ihrem Code mit meinen vorgeschlagenen Revisionen erstellt und es funktioniert gut. Schau dir den Link an, den ich zu meiner Antwort hinzugefügt habe. Der einzige Zusatz zu Ihrem Code ist, dass ich ngDialog in POController injiziert habe. – jbrown

+0

@McDuff Können Sie etwas mehr aufgeben als nur zu sagen, dass es nicht funktioniert? Können Sie Fehler, Protokolle oder Ihren aktualisierten Code bereitstellen? Vielleicht ein ähnliches Beispiel für JSFiddle einrichten? – 10100111001

Verwandte Themen