Binding data with an angular-js ionic popup

Question

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

Marc Harry · Accepted Answer · 2014-08-22 11:27:11Z

8

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.

answered Aug 22, 2014 at 11:27

Marc Harry

2,43021 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Dahan Over a year ago

Question: how do you pass $scope when the pop up display is in a service (not in a controller)?

Ivan Stoyanov Over a year ago

@david-w. I have the same problem. You cannot resolve $scope in a factory and if you pass some object other than $scope the popup does not work. Did you manage to resolve this issue?

Marc Harry Over a year ago

factories/services don't have access to the $scope. But you can pass the $scope into the function as a parameter of the factory/service your calling. I have put a small sample together here: codepen.io/anon/pen/CEjIf I hope that helps you both.

Collectives™ on Stack Overflow

Binding data with an angular-js ionic popup

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related