Jaki jest idiomatyczny sposób komunikacji między Popenerem a jego rodzicem?

Question

To jest do tej pory what I've got. Pierwszy scenariusz:

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

a strona:

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

To wydaje się działać dla mnie, ale nie jestem pewien co do popover._scope części. Czy to powinno być dostępne w ten sposób? Nie mogę znaleźć innego sposobu.

Co to jest idiomatyczny sposób na zrobienie tego? A jakie są dobre przykłady?

Dziękuję.

Answer 1

Można użyć parametru parentScope aby na zakres popover potomka zakresu AppController:

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

Teraz masz kilka opcji, w jaki sposób komunikować się między zakresami. Ponieważ zakres popover jest potomkiem zakresu AppController można na przykład użyć $scope.$emit() emitować zdarzenia, gdy zmienia się wartość:

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

Zrobiłem prosty przykład: http://codepen.io/argelius/pen/avmqOP

Można również użyć ngModel do uzyskaj dostęp do wartości, ale pamiętaj, że to tak naprawdę dziadkowie, więc w takim przypadku musisz wykonać ng-model="$parent.$parent.greeting", co nie jest zbyt miłe.

Polecam podejście zdarzenia.