使用 templateUrl 时动态加载的指令内容不显示

Question

我们有以下指令：

angular.module("MyApp")
    .directive('documentViewer', function () {
        return {
            restrict: 'E',
            link: function (scope, element, attrs) {
            },
            templateUrl: "templates/documentViewer.tpl.html"
        }
    });

在页面上，我们有一个网格，网格中的每一行都有一个 link，用户可以单击它。当用户单击此 link 时，我们试图从页面控制器中显示一个弹出窗口：

self.viewDocument = function (docId) {
    var title = "Document Viewer";
    var body = $compile('<document-viewer></document-viewer>')($scope);
    showBootstrapModalDialog(title, body, true, true, false);
};

在 Chrome Dev Tools 的“网络”选项卡中，我可以看到正在提取指定的模板，但是弹出窗口中没有显示内容。你可以在这里看到它：Screenshot of pop-up

模板内容如下：

<div>
    document viewer template
</div>

我错过了什么？

Answer 1

为什么需要使用$compile？

像这样的东西一定能奏效

self.viewDocument = function (docId) {
 $scope.currentDoc = docId;
};

<div>
  ...
  <document-viewer ng-if='currentDoc'></document-viewer>
  ...
</div>

使用 templateUrl 时动态加载的指令内容不显示

Content for directive loaded dynamically not showing when using templateUrl

javascript

angularjs

templates

directive