在Onsen popover和它的父母之间进行交流的惯用方法是什么？

Question

这是我到目前为止所得到的.首先是脚本:

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"的不是很好.

我会推荐这种活动方法.