如何将变量传递给兄弟控制器

Question

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

我在一个对话框中启动一个窗体，它有自己的控制器。

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

我正在尝试遵循以下 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() 的解析属性注入对话框控制器，像这样：

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了解更多详情。

如何将变量传递给兄弟控制器

How do I pass variables to a sibling controller

angularjs

controllers

ng-dialog