将编译元素添加到 Angular 指令不起作用

Question

In this plunk 我有一个包含 Angular UI 模态的指令。该指令采用嵌入的元素并填充模式。

这工作正常，但是当我尝试编译新元素并将它们添加到模态时，这不起作用。例如，我正在尝试将已编译的 div 添加到 root 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);  
          })
        })
      };

    }
  }
});

Answer 1

问题是当您尝试将已编译的元素附加到 <div id=#root'></div> 时，模式尚未准备好，因此 angular.element('#root') 将一无所获。你需要做的是改变追加和嵌入的顺序。

工作示例： http://plnkr.co/edit/T5gpxYlvsxI5IY4zxR3E?p=info

将编译元素添加到 Angular 指令不起作用

Adding compiled element to Angular directive is not working

angularjs

angular-ui

angular-ui-bootstrap

angular-directive