onsen-ui - 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使 popover 范围成为 AppController 的后代的参数范围:

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

现在您有一些关于如何在范围之间进行通信的选项。由于弹出范围是 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访问该值，但请记住，它实际上是祖 parent ，因此在这种情况下，您需要执行 ng-model="$parent.$parent.greeting"这不是很好。

我会推荐事件方法。