2-way binding not working?

ionic-v1
1

What am I doing wrong here? When I change the input value from “Change this”, leave the textbox to trigger the search() on blur, it doesn’t seem to update the scope variable it is bound to…

http://codepen.io/gregorypratt/pen/bJlaA

2

You have to initialize your query before using it.

For some reason the blur seems to be fired before the scope is populated. I’m not sure if that might be a bug.

Working plnkr: http://plnkr.co/edit/GOdrPcHVdGCrsrTtkhKc?p=preview

3

I am having something similar 2-way binding not always working, My example is very complicated than this one, mainly I have a calendar (ui-calendar) with a bunch of events fetched from a web service, once you tab an event it should open a modal with events details.

Tabing the event set a $scope.currentEvent to the selected event, and in the modal I bind the $scope.currentEvent.title into the modal header. Sometimes it work and sometimes it appears to be empty. I suspect that it’s a problem of racing events or something like this.

.controller('CalendarCtrl', function($scope, Schedule, $ionicLoading, $ionicModal) {

  // Add Loading Popup
  var loading = $ionicLoading.show({
    content: 'We are getting the calander for you...',
    showDelay: 1000
  });

  // EventSorces Array
  $scope.eventSource = [];
  // current event object
  $scope.currentEvent = {};

  /* config ui object */
  $scope.uiConfig = {
    
    // UI-Calendar Config.
    calendar:{
      // height: 700,
      editable: false,
      header:{
        left: '',
        // center: 'title',
        right: ''
      },

      /* EventClick (Fired once an event */
      eventClick: function(calEvent, jsEvent, view) {
        // Set currentEvent in scope to clicked event.
        $scope.currentEvent = calEvent;

        console.log($scope.currentEvent);

        // Then Open Modal.
        $scope.openModal();
      }
    }

  };

  // Get Schedule data from api
  Schedule.get().then(function(events){

    // Prepare Events Data as a fullCalendar EventsSource Object
    $scope.eventSource.push( Schedule.prepareEvents(events) );

    // Hide Loading 
    loading.hide();
  });

  $ionicModal.fromTemplateUrl('templates/show.html', function (modal) {
      $scope.modal = modal;
  }, {
      scope: $scope,
      animation: 'slide-in-up'
  });

  $scope.openModal = function() {

    // Show Modal
    $scope.modal.show();
    console.log($scope.currentEvent);

  }; 

  $scope.closeModal = function() {
    // Hide Modal
    $scope.modal.hide();

    // Reset the currentEvent Object
    $scope.currentEvent = {};
  };

})

Logging the $scope.currentEvent always show the calendar event object in the console, but as I mentioned before sometimes it work in the Modal template. (That’s why I am suggesting that it’s an event racing problem).

1 Like
4

This might be related to a modal issue, where the modal is not ready. Have you tried chaining the modal with then() I think the 0.9.19 release introduced that feature. Otherwise, try a timeout.

5

Hi @daniel, I am not sure how it should be implemented in my case, as you see, I create a modal and then change the data binded inside the modal, I can’t see how it’s still not ready. btw it works fine for the first time and then it randomly works. If you can provide a code example that can be integrated with the above code I will be thankful.

6

can you provide a plnkr?

7

@daniel - thank you for your first reply - that solved my problem!! :slight_smile:

8

Here you are, It may take sometime for the calendar events to show, so be patient, Plunker

9

@jonathan_hindi You need to wrap you show modal call in a scope apply:

$scope.openModal = function() {
  $scope.$apply(function() {
    $scope.modal.show();
  });
};

Working Plnkr: http://plnkr.co/edit/zbroGivRk1Q4I4FUGc5t?p=preview

10

Thanks @daniel, It’s working now, can you give me a brief look why should be wrapped with $scope.apply, I am newbie to both AngularJS and Ionic.

11

$scope.apply works fine

12

Hey daniel, I tried a $timeout around my modal-init; doesn’t seem to help – but thanks for the tip!

13

I’m getting an “Error: [$rootScope:inprog] $apply already in progress”. Same code as above.