動態地向模板添加角度指令

Question

您好來自Stackoverflow的人們，

我有以下指令：

app.directive("newcard", function() {
   return{
      restrict: 'E',
      scope: {},
      replace: true,
      templateUrl: '*templateUrl*',
      link : function ($scope) {
         scope.cardId = numberOfCards;
      }
   };
})

但是當我動態添加：

$('.tree-cards').append('<newcard></newcard>');

它添加的只是一個空標簽。 有沒有一種方法可以將其替換為模板的內容？

Answer 1

愚蠢的我，我嘗試使用$ compile，但擔心它不起作用。 原來，我不得不在正確的地方注入依賴來進行編譯。

在每種情況下，這對我都有效：

var divElement = angular.element(document.querySelector('.tree-cards'));
var appendHtml = $compile('<newcard></newcard>')($scope);
divElement.append(appendHtml);