使用包含指令的 angular.element 似乎会忽略嵌入的内容

Question

假设我有一个需要动态生成的指令：

var windowEl = angular.element("<window>Transcuded content....</window");

$compile(windowEl)(scope);

$element.append(windowEl);

myWindow 指令已成功创建并附加到 dom，但是嵌入的内容丢失了。我确实在指令对象中设置了 transclude: true。我在这里缺少什么吗？如果没有，有什么解决方法吗？

这是我的 windowDirective.js

define(['app'], function (app) {
  app.directive('window', function () {
    return {
      restrict: 'E',
      transclude: true,

      templateUrl: 'app/shared/windows/windowView.html',

      link: function (scope, element, attrs) {
        scope.closeWindow = function () {
          $(".window").hide();
        }
      }
    }
  });
});

Answer 1

我检查了你的代码并且似乎工作检查 this example 在那种情况下我也对你做同样的事情，唯一的区别是如果你使用指令动态注入你的 window 应该是：

 angular.module('App').directive('myDirective', function () {
    return {
      restrict: 'E',
      transclude: true,
      templateUrl: 'my-directive.html',
      controller: function ($scope,$compile,$element) {
        var windowEl = angular.element("<window>Transcuded content....</window");
        $compile(windowEl)($scope);
        $element.append(windowEl);
      }
    }
  });

然而就像@Andrew Eisenberg我不建议你动态注入html，可能有更好的方法，但我们需要更好地理解你的场景。如果不起作用，请更新插件。

使用包含指令的 angular.element 似乎会忽略嵌入的内容

Using angular.element containing a directive appears to ignore the transcluded content

javascript

angularjs

angularjs-directive