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

ionic-v1
1

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.

2

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:

ng-model="chosenColor"

$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 ^^

3

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!

4

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:
https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Scroll to $on, $broadcast and $emit

5

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!