[SOLVED] How do I pass variables to a sibling controller

How do I pass variables to a sibling controller

I have a controller that deals with Purchase orders. It has the purchase order number.

I launch a form in a dialog box which has its own controller.

I need to show the Purchase order number from the PO controller in this dialog box The third input box on the dialog. What's the correct / recommended way to do this?

I'm trying to stick to best practice and the styling guide from John Papa below.

Thanks.

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

  }


})();

Solution

Inject into the dialog box controller using the resolve property of ngDialog.open(), like this:

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

Then in POLineController:

function POLineController(poNumber) {
  poline = this;

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

}

UPDATE

Here's a working plunk