2016-07-15 1 views
0

私には注文書を扱うコントローラがあります。購買発注番号が記載されています。兄弟コントローラに変数を渡すには

独自のコントローラを持つダイアログボックスでフォームを起動します。

このダイアログボックスのPOコントローラから購買発注番号を表示する必要がありますダイアログボックスの第3入力ボックス。 これを行うには、適切な/推奨される方法は何ですか?

私は、下記のJohn Papaのベストプラクティスとスタイリングガイドに固執しようとしています。

ありがとうございました。このような

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 ngDialog.open(の解決プロパティを使用してダイアログボックスコントローラに

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

    } 


})(); 

答えて

0

注入します)、 :

POLineControllerで次に

function POLineController(poNumber) { 
    poline = this; 

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

} 

UPDATE

は、ここでは、このシナリオでは最良の方法はdataプロパティを使用して、任意のデータへの参照を渡すことであろう取り組んplunk

+0

助けてくれてありがとうございますが、残念ながら私は数時間試してみてもこれらの例のいずれかを得ることができませんでした。あなたはプランナーを更新できますか?私は一晩中それを研究しており、正常に動作することができませんでした。もう一度感謝します。 – McDuff

+0

ご協力いただきありがとうございます。問題は愚かなものだったことが判明しました。 .controller( 'POLineController'、[POLineController]); は であったはずです。コントローラ( 'POLineController'、POLineController); あなたのプランカーはそれをソートしました。ありがとうございました – McDuff

0

です。これにより、テンプレート内のngDialogDataオブジェクトを使用してデータにアクセスすることができます。

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

    } 

<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> 

POLine.htmlは詳細についてはdocumentationを参照してください。

+0

助けをありがとう。私はドキュメントを読み、たくさんの例を試しましたが、何らかの理由でこれらの方法のいずれかを使ってこの作業を行うことはできません。変数を渡すためにサービスを使用することによって、これらの関数を使用せずに動作させることができますが、私はこのアプリケーションをベストプラクティスにして、これらのメソッドをShared Serviceのパスよりも「正当な」ものに見せたいと思います。 – McDuff

+0

@McDuff - 私はあなたのコードから、私の提案されたリビジョンを使って大洪水を作りました。私の答えに追加したリンクをチェックしてください。あなたのコードに加えて、私はPOControllerにngDialogを注入しました。 – jbrown

+0

@McDuffあなたはそれがうまくいかないと言っている以上の何かをあきらめることができますか?エラー、ログ、または更新されたコードを提供できますか?おそらく、JSFiddleで同様のサンプルをセットアップしますか? – 10100111001