This is what I've got so far. First the script:
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();
});
});
});
And the page:
<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>
This seems to work for me, but I'm not sure about the popover._scope
part. Is it supposed to be accessed like that? I can't seem to find any other way.
So what is the idiomatic way to do this? And what are some good examples?
Thank you.
You can use the parentScope
parameter to make the popover scope a descendant of the AppController
scope:
module.controller('AppController', function($scope) {
ons.createPopover('popover.html', {parentScope: $scope});
});
Now you have some options on how to communicate between the scopes. Since the popover scope is a descendant of the AppController
scope you can for instance use $scope.$emit()
to emit events when the value changes:
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);
});
});
I made a simple example: http://codepen.io/argelius/pen/avmqOP
You can also use ngModel
to access the the value but keep in mind that it's actually the grandparent so in that case you need to do ng-model="$parent.$parent.greeting"
which is not very nice.
I would recommend the event approach.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With