使用templateUrl

Question

我们有以下指令：

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

在页面上，我们有一个网格，网格中的每一行都有一个用户可以点击的链接。当用户点击此链接时，我们会尝试在页面控制器中显示弹出窗口：

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

在Chrome开发者工具的“网络”标签中，我可以看到正在提取指定​​的模板，但是，弹出窗口中不显示内容。你可以在这里看到它：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>