2016-07-15 157 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

相关问题