Onsen popover 与其父项之间的惯用通信方式是什么？

Question

到目前为止，这是 what I've got。首先是脚本：

ons.bootstrap();
.controller('AppController', function($scope) {
  $scope.greeting = "Hello!";
  ons.createPopover('popover.html').then(function(popover) {
    $scope.popover = popover;
    popover.on('preshow', function() {
      popover._scope.greeting = $scope.greeting;
    });
    popover.on('posthide', function() {
      $scope.greeting = popover._scope.greeting;
      $scope.$apply();
    });
  });
});

以及页面：

<ons-page ng-controller="AppController">
  <ons-toolbar>
    <div class="center">Popover</div>
  </ons-toolbar>

  <div style="margin-top: 100px; text-align: center">
    <ons-button modifier="light" ng-click="popover.show($event)">Show popover</ons-button>
  </div>
  <div style="margin-top: 100px; text-align: center">{{greeting}}</div>

</ons-page>

<ons-template id="popover.html">
  <ons-popover direction="up down" cancelable>
    <div style="text-align: center; opacity: 0.8;">
      <input style="margin: 20px" type="text" ng-model="greeting" />
    </div>
  </ons-popover>
</ons-template>

这似乎对我有用，但我不确定 popover._scope 部分。应该这样访问吗？我似乎找不到任何其他方法。

那么执行此操作的惯用方法是什么？有哪些好的例子？

谢谢。

Answer 1

您可以使用 parentScope 参数使弹出窗口范围成为 AppController 范围的后代：

module.controller('AppController', function($scope) {
  ons.createPopover('popover.html', {parentScope: $scope});
});

现在您可以选择如何在范围之间进行通信。由于 popover 范围是 AppController 范围的后代，您可以使用 $scope.$emit() 在值更改时发出事件：

module.controller('AppController', function($scope) {
  $scope.greeting = 'Hello!';

  ons.createPopover('popover.html', {parentScope: $scope}).then(function(popover) {
    $scope.popover = popover;
  });

  $scope.$on('update', function(event, value) {
    $scope.greeting = value;
  });
})

.controller('PopoverController', function($scope) {
  $scope.$watch('greeting', function(value) {
    $scope.$emit('update', value);
  });
});

我举了一个简单的例子： http://codepen.io/argelius/pen/avmqOP

您也可以使用 ngModel 来访问值，但请记住它实际上是祖父母，所以在这种情况下您需要做 ng-model="$parent.$parent.greeting" 这不是很好。

我会推荐事件方法。

Onsen popover 与其父项之间的惯用通信方式是什么？

What is the idiomatic way of communicating between Onsen popover and its parent?

onsen-ui