2016-07-15 156 views
0

我有一個處理採購訂單的控制器。它有采購訂單號。如何將變量傳遞給兄弟控制器

我在一個有自己的控制器的對話框中啓動一個窗體。

我需要在此對話框中顯示PO控制器中的採購訂單編號對話框上的第三個輸入框。 什麼是正確/推薦的方式來做到這一點?

我試圖堅持最佳實踐和從下面的約翰帕帕造型指南。

謝謝。

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

    } 


})(); 

回答

0

注入使用ngDialog.open(的resolve屬性對話框控制器),這樣:

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

然後在POLineController:

function POLineController(poNumber) { 
    poline = this; 

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

} 

UPDATE

這裏的工作plunk

+0

感謝您的幫助,但不幸的是,我嘗試了幾個小時後仍未能獲得這些示例中的任何一個。你能夠更新重擊者嗎?我一直在研究它整夜,並沒有得到它的成功工作。再次感謝。 – McDuff

+0

感謝您的幫助。事實證明這個問題是愚蠢的: .controller('POLineController',[POLineController]); 應該是 .controller('POLineController',POLineController); 你的運動員排序。謝謝 – McDuff

0

在這種情況下,最好的辦法是使用data財產提及任何數據傳遞。這將允許您使用模板中的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 
     }); 
    } 

    } 

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> 

參考documentation瞭解更多詳情。

+0

感謝您的幫助。我讀過文檔,並嘗試了很多例子,但由於某種原因,我不能使用這些方法中的任何一種來工作。我可以在不使用這些函數的情況下使用這些函數來傳遞變量,但我希望此應用程序能夠最佳實踐,並且這些方法似乎比共享服務路徑更「合法」。 – McDuff

+0

@McDuff - 我使用我的建議修訂版從代碼中創建了一個plunk,它工作得很好。看看我添加到我的答案的鏈接。代碼中的一個補充是我將ngDialog注入到了POController中。 – jbrown

+0

@McDuff你可以放棄一些東西,而不只是告訴我們它不工作?你能提供任何錯誤,日誌或更新後的代碼嗎?也許在JSFiddle上設置一個類似的例子? – 10100111001

相關問題