AngularJS Two way binding between controllers in Modal

Question

My index.html contains a contenteditable div and a button. On button click(ng-click) the $uibModal.open() function in the ModalDemoCtrl controller opens a modal window, which then calls the controller ModalInstanceCtrl which renders various smileys in the modal. I want that when I click on a smiley in the modal window, the image gets rendered in the contenteditable div in my index.html

index.html:

<div ng-controller="ModalDemoCtrl" id="angularData">
  <div id="view1">
      <button type="button" class="btn btn-default" ng-click="open('lg')">Emojis</button>
      <div contenteditable="true" ng-model="textModel"></div>
  </div>
</div>

emojis.js:

angular.module('ui.bootstrap.demo')
.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.animationsEnabled = true;
  $scope.textModel = "Hello";

  $scope.open = function (size) {
    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'template/template.html',
      controller: 'ModalInstanceCtrl',
      windowClass: 'large-Modal',
    });
  };
});


angular.module('ui.bootstrap.demo')
.controller('ModalInstanceCtrl', function ($scope, $window, createEmojiIcon) {

  $scope.getUnicode = function(id) {  //This functions get the img tag of clicked smiley in variable 'input'
  var style = createEmojiIcon.createEmoji(icons[id]);
  var input = '<img src="img/blank.gif" class="img" style="' + style + '" alt="' + icons[id][3] + '" title="' + icons[id][3] + '">';
  }
});

All I want is this variable called input to render in the contenteditable div when the function $scope.getUnicode is called.

In simple words that textModel in the ModalDemoCtrl gets appended with the img tag when the function $scope.getUnicode is called.

ps: The function $scope.getUnicode is called by ng-click in template.html

Here is plunker sample.

Code is quite big, I'll try to put down all the code in plnkr. I'm new to all this, i'll checkout if i can! — iamsaksham, Mar 10 '16 at 09:46

score 2 · Accepted Answer · answered Mar 10 '16 at 10:48

You need to rootScope broadcast for the click event since you have 2 independent scope.

Fixed you code. Passing X from model pop-up to other controller via $rootScope broadcast.

inside ModalInstanceCtrl

$rootScope.$broadcast('selectedCode', {message: 'x'});

And at ModalDemoCtrl

$rootScope.$on('selectedCode', function(event, args){
   alert(args.message);
});

https://plnkr.co/edit/YE3u8JEXJ4mABOPhUJyg

Amulya Kashyap · Answer 2 · 2016-03-10T10:15:01.100

1

Dear,

you have to use factory or services. But i'll show you with facotry reference :

angular.module('ui.bootstrap.demo')

    .factory('myFactory', function() {
        return {
            setInput : function(data){
                input = data;
            }
            getInput : function(){
                return input;
            }  
        }
    });

    .controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
        $scope.input= myFactory.getInput();
        **//you'll get value what you set in controller below**
    });

    .controller('ModalInstanceCtrl', function ($scope, $window, createEmojiIcon){

        myFactory.setInput(data);
        **//you are setting value here**
    });

Thanks & Cheers

edited Mar 10 '16 at 10:15

answered Mar 10 '16 at 09:58

Amulya Kashyap

2,333
17
25

I think you are doing it the other way, you are setting input in ModalDemoCtrl and getting it in ModalInstanceCtrl. What I want is to set the input in ModalInstanceCtrl and get it in ModalDemoCtrl. For that I need to put a watcher in ModalDemoCtrl but then i have heard that watchers slow down your webapp so i am avoiding watcher. I was searching if I can get a two way binding type that whenever input gets a value then it gets updated in the contenteditable div – iamsaksham Mar 10 '16 at 10:06
1

Your code will not work unless you emit event to inform the parent controller about the event happened. So you have to use factory to store the data + $emit to inform the parent. – Dhiren Mar 10 '16 at 10:07
I am all new to Angular Dhiren. I'll checkout if I can do this $emit thing when the getUnicode is called – iamsaksham Mar 10 '16 at 10:10
now see .. @isaksham ... value would be setting in ModalInstanceCtrl and you will be receiving in ModalDemoCtrl ........ – Amulya Kashyap Mar 10 '16 at 10:18

AngularJS Two way binding between controllers in Modal

2 Answers2