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"，这不是很好。< / p>

我会推荐事件方法。

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

1 个答案: