Problem getting ng-model value with Onsen Dialog

Question

Problem getting ng-model value with Onsen Dialog

Navigation

#1 by (0 votes)

1

Good morning, I've had a problem with Onsen UI for a long time, specifically the Dialog component.

It seems to be a scope problem of the Scope or Controller. For example:

app.controller("MainController", function($scope) {

$scope.showEditDialog = function($event, tag) {
 $scope.tagEdit = tag;

 ons.createPopover('editAgenda.html', {
    parentScope: $scope
    }).then(function(alertDialog) {

    $scope.editAgendaDialog = alertDialog;
    $scope.editAgendaDialog.show($event.target);

   });

  };

$scope.simpleAgendaEdition = function(value) {

    $scope.newValue=value;
    $scope.updateOnServer($scope.tagEdit, $scope.newValue, $scope.id);
    $scope.hideEditDialog();
}
});



<body ng-controller="MainController">

<ons-template id="editAgenda.html" >
    <ons-popover direction="up down"  cancelable>
        <div class="alert-dialog-title w3-padding-4">
            Edit Title
        </div>
        <div class="alert-dialog-content">
            <textarea ng-show="tagEdit=='titulo'" ng-model="newValue" placeholder="Title"></textarea>
        </div

       <div class="alert-dialog-footer">

         <button ng-click="simpleAgendaEdition(newDate)" class="alert-dialog-button">OK</button>

       </div>>
    </ons-popover>
</ons-template>

When creating the dialog I can correctly evaluate the value of $ scope.tagEdit, however, I can not get the value of $ scope.newValue in the MainController, it remains empty "" as if it had not changed in the dialog. The strange thing is that if I add this line:

{{newValue}}

Inside the dialog, I can see clearly that the ng-model does change, but it is not possible to use that value in the MainController, to solve this temporarily, I send the value of the ng-model directly in the function, as a parameter

   <button ng-click="simpleAgendaEdition(newDate)" class="alert-dialog-button">OK</button>

But I think it's a bad way to do it, what would be the best way to get the value of the ng-model? Is there any configuration that is missing? I find it curious that I can access the functions of the MainController and even the variables that already exist, but I can not get the modified value in the onsen dialog.

Thank you very much for your comments!

html angularjs alertdialog

asked by Carlos Vázquez 05.07.2016 в 18:20

source

1 answer

Error Timeout ASP.NET SP Error finding the map with Mapsforge

score 0 · Accepted Answer

When creating the dialog I can correctly evaluate the value of $ scope.tagEdit, however, I can not get the value of $ scope.newValue in the MainController, it remains empty "" as if it had not changed in the dialog.

This happens because the dialog creates its own $scope , and because of the prototypical string of a $scope father and its $scope son, it is the son who owns the new property, but it is not accessible from the father.

The way to avoid this "problem" is to use a object previously declared in the $ scope father . That is, in the parent scope (MainController) you define an object and in the internal model of the dialog you reference one of the properties of that object.

In MainController you declare an object, example:

$scope.datosDelModal = { newValue: "" };

and in the dialog you use datosDelModal.newValue to bin.

<textarea ng-show="tagEdit=='titulo'" ng-model="datosDelModal.newValue"
          placeholder="Title"></textarea>

Thus, when angular searches the chain of prototypes, it finds the object datosDelModal in the parent and uses its internal property to bin the ng-model , therefore newValue is not created in the $scope son.