Question

我有一个处理采购订单的控制器。它有采购订单号。

我在一个对话框中启动一个表单，该对话框有自己的控制器。

我需要在此对话框中显示PO控制器的采购订单编号对话框中的第三个输入框。这样做的正确/推荐方法是什么？

我正在努力坚持最佳做法和John Papa的造型指南。

感谢。

index.html
<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script data-require="angularjs@1.5.3" 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";

  }


})();

Answer 1

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

}

<强>更新

这是一个有效的plunk

Answer 2

此方案中的最佳方法是使用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。

如何将变量传递给同级控制器

2 个答案: