Qual è il modo di comunicare idiomatico tra il pop-up di Onsen e il suo genitore?

Question

Questo è what I've got finora. In primo luogo lo 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(); 
    }); 
    }); 
}); 

E la pagina:

<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> 

Questo sembra funzionare per me, ma non sono sicuro circa la parte popover._scope. Dovrebbe essere acceduto in questo modo? Non riesco a trovare nessun altro modo.

Quindi qual è il modo idiomatico per fare questo? E quali sono alcuni buoni esempi?

Grazie.

Answer 1

È possibile utilizzare il parametro parentScope per rendere la portata popover un discendente della portata AppController:

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

Ora avete alcune opzioni su come la comunicazione tra gli ambiti. Dal momento che il campo di applicazione popover è un discendente del campo di applicazione AppController è possibile per esempio utilizzare $scope.$emit() per emettere eventi quando il valore cambia:

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); 
    }); 
}); 

ho fatto un semplice esempio: http://codepen.io/argelius/pen/avmqOP

È anche possibile utilizzare ngModel per accedere al valore ma tenere presente che in realtà è il nonno, quindi in tal caso è necessario fare ng-model="$parent.$parent.greeting" che non è molto bello.

Consiglierei l'approccio dell'evento.