onsen dialog have limited access to parent scope

Question

I'm looking for some help on using onsen-ui's dialog component. It seems to be a scope issue.

In my HTML file, I have a dialog template looks like this.

<ons-template id="report.html">
  <ons-dialog var="dlg" cancelable>
      <h1>{{clicked.name}}</h1>
      <ons-button onclick="clickButton()">Click</ons-button>
  </ons-dialog>
</ons-template>

And in my controller, I have

$scope.clickButton = function(){
    dlg.hide();
}
$scope.dialogs = {};

$scope.show = function(dlg) {
    $scope.clicked = {'name':"bar"};
    if (!$scope.dialogs[dlg]) {
      ons.createDialog(dlg, {parentScope: $scope}).then(function(dialog) {
        $scope.dialogs[dlg] = dialog;
        dialog.show();
      });
    } else {
      $scope.dialogs[dlg].show();
    }
}

The weird part is that I can access "clicked" in the dialog scope, but not "reportButton", they are in the same scope, or at least I can tell.

Here is the codepen link

Thanks in advance!

Answer 1

To call the function from controller scope, you should be ng-click instead of onclick.

<ons-button ng-click="reportButton()">click</ons-button>

Working Codepen