2015-09-24 10 views
5

これはこれまでのところ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一部についてはよく分かりません。それはそれのようにアクセスされるはずですか?私は他の方法を見つけることができないようです。

これを行う慣用方法は何ですか?そして良い例は何ですか?

ありがとうございます。

答えて

5

あなたはポップオーバーの範囲にAppControllerスコープの子孫を作るためにparentScopeパラメータを使用することができます。

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

は今、あなたは、スコープ間で通信する方法についていくつかのオプションがあります。 がhttp://codepen.io/argelius/pen/avmqOP

あなたはまたにngModelを使用することができます。

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

私は簡単な例を作った:ポップオーバーの範囲はAppControllerスコープの子孫であるので、値が変更されたときには、例えば、イベントを発するように$scope.$emit()を使用することができます値にアクセスしますが、実際には祖父母であることを覚えておいてください。その場合はng-model="$parent.$parent.greeting"を実行する必要があります。

イベントアプローチをお勧めします。

+1

答えは啓発ですが、私が望むものと少し異なります:popover hideイベントで値を更新したいのですが? –

関連する問題