Urigo / Ionic-MeteorCLI-WhatsApp

WhatsApp Clone tutorial with Ionic 1.0 and Meteor CLI
https://www.angular-meteor.com/tutorials/whatsapp/meteor/bootstrapping
MIT License
205 stars 267 forks source link

Please help: how to make angular-ecmascript work with $ionicpopup #25

Closed mncvnn closed 7 years ago

mncvnn commented 8 years ago

Dear all, First of all, sorry to put this here because this is not an issue. But I don't know where to ask. Since my current app is a little twist from this whatsapp, so I hope that there are more expert, more experience developer here to get help.

I'm trying to use $ionicpopup to get input data from user, I've been following the docs from ionic website and stuck at getting data back. Here are my controller:

import {Settings} from '../../../lib/collections';
import {Controller} from 'angular-ecmascript/module-helpers';

export default class SettingCtrl extends Controller {
    constructor() {
        super(...arguments);
        this.helpers({
            loginData() {
                var temp = null;
                if (Session.get('user_info')) {
                    temp = Session.get('user_info');
                    temp.password = '';
                }
                return temp;
            }
        });
    }

    editUserFullname() {
        this.$ionicPopup.show({
            template: '<input type="text" ng-model="setting.loginData.fullname">',
            title: 'Please input your fullname',
            subTitle: 'Clear empty to user default login name',
            //scope: this.$scope,
            buttons: [
                {text: 'Cancel'},
                {
                    text: '<b>Save</b>',
                    type: 'button-positive',
                    onTap: function (e) {
                        if (!this.loginData.fullname) {
                            //don't allow the user to close unless he enters wifi password
                            e.preventDefault();
                        } else {
                            return this.loginData.fullname;
                        }
                    }
                }
            ]
        });
    }
}

Here is part of my html file (using Controller as technique).

<div class="item item-icon-left item-icon-right">
    <i class="icon ion-person" ng-click="setting.editUserFullname()"></i>
    <div ng-if="setting.loginData.fullname">
        Hello <strong>{{ setting.loginData.fullname }}</strong>
    </div>
    <div ng-if="!setting.loginData.fullname">
        Hello <strong>{{ setting.loginData.username }}</strong>
    </div>
    <i class="icon ion-edit"></i>
</div>

This is what I got so far, still faced the error that loginData is undefined. Here the doc and examples from Ionic: http://ionicframework.com/docs/api/service/$ionicPopup/

// An elaborate, custom popup
  var myPopup = $ionicPopup.show({
    template: '<input type="password" ng-model="data.wifi">',
    title: 'Enter Wi-Fi Password',
    subTitle: 'Please use normal things',
    scope: $scope,
    buttons: [
      { text: 'Cancel' },
      {
        text: '<b>Save</b>',
        type: 'button-positive',
        onTap: function(e) {
          if (!$scope.data.wifi) {
            //don't allow the user to close unless he enters wifi password
            e.preventDefault();
          } else {
            return $scope.data.wifi;
          }
        }
      }
    ]
  });

I'm still not so sure about angular-ecmascript, don't know where to get $scope variable.

mncvnn commented 7 years ago

Does anyone use $ionicPopup to get data before?

gauravdhiman commented 7 years ago

You need to explicitly pass $scope in controller constructor like below.

export default class SettingCtrl extends Controller {
    constructor($scope) {

and then later in you controller methods, you can refer the $scope as this.$scope Refer: https://www.npmjs.com/package/angular-es6#controller

DAB0mB commented 7 years ago

@mncvnn The scope should be automatically defined once using angular-ecmascript's API. I suggest you go on StackOverflow http://stackoverflow.com/questions/tagged/ionic-framework because as you said this is not an issue. I believe in the Ionic community they are very familiar with $ionicPopup and you will have more answers.