[英]AngularJS Two way binding between controllers in Modal
My index.html
contains a contenteditable div and a button. 我的
index.html
包含一个contenteditable div和一个按钮。 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. 在按钮上
click(ng-click)
按键click(ng-click)
$uibModal.open()
, ModalDemoCtrl
控制器中的$uibModal.open()
函数将打开一个模态窗口,然后调用控制器ModalInstanceCtrl
,该控制器在模态中呈现各种表情。 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
中的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
: 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. 我想要的是这个变量,在调用函数
$scope.getUnicode
时,在contenteditable
div中称为输入。
In simple words that textModel in the ModalDemoCtrl
gets appended with the img tag when the function $scope.getUnicode
is called. 简单来说,当调用函数
$scope.getUnicode
时,ModalDemoCtrl中的ModalDemoCtrl
会附加img标记。
ps : The function $scope.getUnicode
is called by ng-click
in template.html
ps :函数
$scope.getUnicode
在template.html
通过ng-click
调用
You need to rootScope broadcast for the click event since you have 2 independent scope. 由于您有2个独立的范围,因此您需要为click事件进行rootScope广播。
Fixed you code. 修复了你的代码。 Passing X from model pop-up to other controller via $rootScope broadcast.
通过$ rootScope广播将X从模型弹出窗口传递到其他控制器。
inside ModalInstanceCtrl 在ModalInstanceCtrl中
$rootScope.$broadcast('selectedCode', {message: 'x'});
And at ModalDemoCtrl 在ModalDemoCtrl
$rootScope.$on('selectedCode', function(event, args){
alert(args.message);
});
https://plnkr.co/edit/YE3u8JEXJ4mABOPhUJyg https://plnkr.co/edit/YE3u8JEXJ4mABOPhUJyg
Dear , 亲爱的 ,
you have to use factory or services. 你必须使用工厂或服务。 But i'll show you with facotry reference :
但我会告诉你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 & Cheers 谢谢和欢呼
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.