gpt4 book ai didi

javascript - AngularJS Modal中 Controller 之间的两种方式绑定(bind)

转载 作者:可可西里 更新时间:2023-11-01 13:03:39 29 4
gpt4 key购买 nike

我的 index.html 包含一个内容可编辑的 div 和一个按钮。在 click(ng-click) 按钮上,ModalDemoCtrl Controller 中的 $uibModal.open() 函数打开一个模态窗口,然后调用 Controller ModalInstanceCtrl 在模式中呈现各种笑脸。我希望当我在模态窗口中单击笑脸时,图像会呈现在我的 index.html

中的 contenteditable div 中

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] + '">';
}
});

我想要的是调用函数 $scope.getUnicode 时在 contenteditable div 中呈现这个名为 input 的变量。

简单来说,当调用函数 $scope.getUnicode 时,ModalDemoCtrl 中的 textModel 会附加 img 标签。

ps: $scope.getUnicode函数在template.html中被ng-click调用/p>

Here 是 plunker 样本。

最佳答案

由于您有 2 个独立的范围,因此您需要为点击事件广播 rootScope。

修正了你的代码。通过 $rootScope 广播将 X 从模型弹出窗口传递到其他 Controller 。

在 ModalInstanceCtrl 中

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

在 ModalDemoCtrl 处

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

https://plnkr.co/edit/YE3u8JEXJ4mABOPhUJyg

关于javascript - AngularJS Modal中 Controller 之间的两种方式绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35912742/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com