Hinzufügen eines kompilierten Elements zur Winkeldirektive funktioniert nicht

Question

In this plunk Ich habe eine Direktive, die ein Angular UI Modal enthält. Die Direktive nimmt überholte Elemente auf und füllt das Modal auf.

Das funktioniert gut, aber wenn ich versuche, neue Elemente zu kompilieren und sie dem Modal hinzuzufügen, funktioniert das nicht. Zum Beispiel versuche ich, eine kompilierte div der root div hinzuzufügen. Das Wurzel-Div ist im Modal enthalten (eingeschlossen), aber wenn das Modal offen ist, hat es keine Kinder. Irgendwelche Ideen, wie das funktioniert?

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); 
      }) 
     }) 
     }; 

    } 
    } 
}); 

Answer 1

Das Problem ist, wenn Sie versuchen, das kompilierte Element <div id=#root'></div> die modale anhängen ist noch nicht fertig, so angular.element('#root') nichts bekommen. Was Sie tun müssen, ist die Reihenfolge von Append und Transclude zu wechseln.

Arbeitsbeispiel: http://plnkr.co/edit/T5gpxYlvsxI5IY4zxR3E?p=info