Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Binding data with an angular-js ionic popup

I'm having weird issues that I can't seem to find an explanation for. I show a popup with a single input which I am binding to a variable on my scope I'm passing the $scope to the popup. The binding works and I can see the variable that is set and it changes as I type. But as soon as I close the popup and log out that scope variable on the "on tap" function" it seems to go back to its original value.

EDIT: a pen that demonstrated the general issue: http://codepen.io/anon/pen/ariDh

code:

var sendPopup = $ionicPopup.show({
     title: $translate.instant(popupTitle),
     subTitle: $translate.instant('POPUP_WITH_MESSAGE_SUBTITLE'),
     templateUrl:  'templates/leave-message-popup.html',
     scope: $scope,
     buttons: [
      { text: $translate.instant('BUTTON_CANCEL') },
      {
        text: $translate.instant('BUTTON_SEND'),
        type: 'button-positive',
        onTap: function(e) {
                console.log("contact message:" + $scope.contactMessage);
                if (!$scope.contactMessage) {
                  console.log("preventing default");
                  e.preventDefault();
                } else {
                  $scope.sendData(contactType);
                }
              }
      },
    ]


   });

template:

<input type="text" ng-model="contactMessage" name="message" placeholder="{{'PLACEHOLDER_CONTACT_MESSAGE' | translate}}" required autofocus>
{{contactMessage}}
like image 917
Yoav Schwartz Avatar asked Aug 15 '14 08:08

Yoav Schwartz


1 Answers

This amended version of your codepen shows this working: http://codepen.io/anon/pen/rgBLa

Changing the variable to an object that is on the scope that is passed to the popup correctly allows this to then be bound back to the controllers scope when it changes. This is needed due to the way the scope is managed when passed to the $ionicPopup.

$scope.contactMessage = { text: "text" }

Then updated the mark-up to correctly look at this property on the scope.

<input type="text" ng-model="contactMessage.text" name="message">
  {{contactMessage.text}}

I hope this helps with your issue.

like image 185
Marc Harry Avatar answered Oct 03 '22 00:10

Marc Harry