Cách giao tiếp thành ngữ giữa cửa sổ Onsen và bố mẹ là gì?

Question

Đây là what I've got cho đến thời điểm này. Đầu tiên là kịch bản:

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

Và trang:

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

Điều này dường như làm việc cho tôi, nhưng tôi không chắc chắn về phần popover._scope. Có phải nó được truy cập như thế không? Tôi dường như không tìm được cách nào khác.

Vậy cách thức thành ngữ để làm điều này là gì? Và một số ví dụ tốt là gì?

Cảm ơn bạn.

Answer 1

Bạn có thể sử dụng tham số parentScope để làm cho phạm vi popover một hậu duệ của phạm vi AppController:

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

Bây giờ bạn có một số tùy chọn về cách để giao tiếp giữa các phạm vi. Do phạm vi popover là một hậu duệ của phạm vi AppController bạn có thể ví dụ như sử dụng $scope.$emit() phát ra sự kiện khi thay đổi giá trị:

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

tôi đã thực hiện một ví dụ đơn giản: http://codepen.io/argelius/pen/avmqOP

Bạn cũng có thể sử dụng ngModel để truy cập vào giá trị nhưng hãy nhớ rằng nó thực sự là ông bà vì vậy trong trường hợp đó bạn cần phải làm ng-model="$parent.$parent.greeting" mà không phải là rất tốt đẹp.

Tôi muốn giới thiệu phương pháp tiếp cận sự kiện.