Search code examples
angularjscontrollerhybrid-mobile-apponsen-ui

Cann't get scope parameters in ons-dialog. Why?


I think this is not a difficult question but something went wrong. I'm new in working with onsen UI and I want to create a dialog window in which I need some parameters. I don't know why it's not working. Here is my HTML:

<ons-template id="tippDialog">
<ons-dialog var="tippdialog" id="tippdialog" ng-controller="controllerName" cancelable>
    <div class="center">
        <h3>Tipp abspeichern</h3>
        <form action="saveTip.php">
            <ons-input id="tippa" type="number" placeholder="TipA" value=""></ons-input>
            <ons-input id="tippb" type="number" placeholder="TipB" value=""></ons-input>
            <p>{{tip_matchid}}{{userid}}</p>
        </form>
        <ons-button id="tippspeichern">Speichern</ons-button>
    </div>
</ons-dialog>

and this is what I do in the controller:

$scope.dialogs = {};

            $scope.tipDialog = function(match_id){
                tip_matchid = match_id;
                $scope.tip_matchid = tip_matchid;
                $scope.userid = userid;
                ons.createDialog("../dialogs/tippDialog.html", $scope).then(function(tippdialog){
                    $scope.dialogs[tippdialog] = tippdialog;
                    tippdialog.show();
                });
            }

Found some of this code here in stackoverflow but nothing I found was helpful. Hope someone can help me. THANKS!


Solution

  • I guess the docs could use some improvements...

    I haven't tested it, but I think this is what you're looking for:

    $scope.dialogs = {};
    
    $scope.tipDialog = function(match_id){
        $scope.tip_matchid = tip_matchid = match_id;
        $scope.userid = userid;
        ons.createDialog("../dialogs/tippDialog.html", {parentScope: $scope}).then(function(tippdialog){
            $scope.dialogs[tippdialog] = tippdialog;
            tippdialog.show();
        });
    }
    

    The important part is {parentScope: $scope}.

    With the current implementation this is the property which Onsen checks.
    It does ons.$compile(angular.element(element))(options.parentScope.$new()).

    So basically your dialog has a sibling scope of the one which you provided. And by using {parentScope: $scope} it becomes a child scope instead, which I guess is what you want to have.