1

I read a lot of articles and AngularJS documentation but I could not find any way to propagate my directive scopes modification to my modal controller.

Here is easier version of the context :

  • An Angular-UI modal should contains a textarea through an Angular directive
  • The user can enter some text
  • The directive should catch the text and applied complex transformations (which is not the problem, that's why I am sending you an easier version ;))
  • The modal should display those transformations and wait for the user to close
  • The directive should modify the modal controller scope to send texts transformations.

I am able to retrieve the model from the modal controller, change it within my directive but when it comes to update parent scope, I always get the default model value.

I tried to used both inherited or isolated scope but I can't see what I am missing. Should anyone help me on this ?

Here is a very detailed planker : http://plnkr.co/edit/t3ecXakeJMlttQkj9GLM?p=preview

To reproduce the problem :

  1. Click on button "Open Modal"
  2. Modal opens and displays default model value "AAA"
  3. Enter "BBB", modal displays "BBB" (directive scope)
  4. Click "Close" button
  5. Main Ctrl is still displaying "AAA" value

Thanks for your help

t00f

t00f
  • 563
  • 1
  • 5
  • 15

1 Answers1

4

you should pass a "sub.model" to your model scope here is a working plunkr http://plnkr.co/edit/vXmgbVdYGrxbxYTIZVUU?p=preview

you'll see in the modal controller that instead of use $scope.model = 'AAA' directly as a string i used $scope.model = {data : 'AAA'} and I directly pass model.data into my-directive in modal.html

you'll get more explanation in this answer

Hope it'll help you

Community
  • 1
  • 1
Fogia
  • 127
  • 1
  • 8