AngularJS Двустороннее связывание между контроллерами в Modal

Question

My index.html содержит контент-доступный div и кнопку. На кнопке click(ng-click) функция $uibModal.open() в контроллере ModalDemoCtrl открывает модальное окно, которое затем вызывает контроллер ModalInstanceCtrl, который отображает различные смайлики в модальном режиме. Я хочу, чтобы, когда я нажимаю на смайлик в модальном окне, изображение визуализируется в contenteditable DIV в моем 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] + '">'; 
    } 
}); 

Все, что я хочу эта переменная называется вводом для рендеринга в div contenteditable при вызове функции $scope.getUnicode.

Простыми словами, что textModel в ModalDemoCtrl добавляется вместе с тегом img при вызове функции $scope.getUnicode.

пс: Функция $scope.getUnicode вызывается ng-click в template.html

Here является plunker образца.

Answer 1

Вы должны rootScope трансляции для события щелчка, так как у вас есть 2 независимых объема.

Исправлен код. Передача X из всплывающего окна модели в другой контроллер через широковещательную рассылку $ rootScope.

внутри ModalInstanceCtrl

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

И ModalDemoCtrl

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

https://plnkr.co/edit/YE3u8JEXJ4mABOPhUJyg

Answer 2

Уважаемый,

вы должны использовать фабрику или услуги. Но я покажу вам со ссылкой FACOTRY:

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 & Приветствия