0
In this plunk私は角型UIモーダルを含むディレクティブを持っています。ディレクティブは、継承された要素を取り、モーダルに値を設定します。コンパイルされた要素をAngularディレクティブに追加しようとしていません
これはうまくいきますが、新しい要素をコンパイルしてモーダルに追加しようとすると、これは機能しません。たとえば、私はroot divにコンパイルされたdivを追加しようとしています。ルートdivはモーダルに含まれます（ただし、継承されます）が、モーダルが開いているときは子はありません。どのようにこの作品を作るためのアイデア？
HTML
<style>
#root {
background-color:orange;
height:20px;
}
</style>
<div the-modal control="modalCtl">
Some transcluded content in the modal:
<input type="text" ng-model="input1" />
<br>
You should see text in the orange rectangle:
<div id="root"></div>
</div>
<button type="button" ng-click="open()">Open me!</button>
Javascriptを
var app = angular.module("app", ['ui.bootstrap']);
app.controller("ctl", function($scope, $compile) {
$scope.modalCtl = {};
$scope.input1 = "abc";
$scope.open = function() {
$scope.modalCtl.openModal();
// add compiled content
var root = angular.element('#root');
var node = angular.element('<div><b>This is the node</b></div>');
var content = $compile(node)($scope);
root.append(content);
};
});
app.directive("theModal", function($uibModal, $timeout) {
return {
restrict: "AE",
scope: {
control: "="
},
transclude: true,
link: function(scope, element, attrs, ctrl, transclude) {
scope.control = scope.control || {}
scope.control.openModal = function() {
scope.instance = $uibModal.open({
animation: false,
scope: scope,
template: '<div class="content"></div>',
appendTo: element
});
$timeout(function(){
transclude(scope.$parent, function(clonedContent){
element.find('.content').append(clonedContent);
})
})
};
}
}
});