Why data passed from Parent view is not changing in $ionicModal(with codepen attached)

Hi all,

I want the parent view to show the display name of the chosen color in the input-note attribute, where the color is selected from the ionic modal. But I found out the ng-model binding is not successful, and I don’t know how to pass the value(display Name) from ionic modal back to its parent.

Here is the code pen: http://codepen.io/sylfree9999/pen/NGMowG

I have referenced this codepen: http://codepen.io/gnomeontherun/pen/crbtA?editors=101, but don’t know why my scenario does not work.

Some help is much appreciated.

because you do not understand how the scopes in angularjs work.

You base-view with the AppCtrl has an own scope.
A child of that is the modal-view and the ModalCtrl.

You can use defined stuff of the parent-scope in the child scope.
For that you need to put all the values on an object. See in the original example --> $scope.modalData = { "msg" : "Test!" };

So you can set modalData.msg as ng-model for you input in you modalView

<input type="text" placeholder="" ng-model="modalData.msg">

If you are using simple variables like in your codepen:


$scope.chosenColor exists only in the ModalCtrl.
If you predefine an object in your AppCtrl like $scope.myForm = {}
and you connect the input in ModalView via ng-model=“myForm.myName” angular checks if there is an object in the current scope (ModalCtrl) --> if not --> check the parent scope (AppCtrl) --> hey here is an object $scope.myForm --> use this ^^

Thanks for your explanation.
I see this is all about the scope inheritance.

BTW, since I changed my model binding using ‘.’ to ensure the prototypical inheritance, I can see the changes in parent scope. What I actually want to achieve is that the parent view can get the selected color displayName. I was thinking to pass out the value by redefine the parent scope property . But I was unable to $watch the changes from parent scope, nor $scope.$on(‘modalCtrl.hidden’) in the modal. Please see the codepen:

I know it is possible to share data between controllers via services. But I don’t know how and when to refresh the value in the parent scope on hiding the modal. Can you share some thoughts on this? Thanks very much!

For those you can trigger an own angularjs event --> if you close your modal trigger $scope.$emit(‘myModalClosed’, myData); // bubbles through all parent scopes

In your parent controller you can listen on that event $scope.$on(‘myModalClosed’, function (event, myData) { … });

You can pass additional data like “myData” and you can define an own name for your event.

Read about it in the angularjs docs:

Scroll to $on, $broadcast and $emit

Thanks very much! This works.
BTW, I know why the $scope.$on did not work. It’s because the events name should be modal.hidden, not the modalCtrl.hidden.
Anyway, thanks very much!