Javascript 包含指令的附加html文件无效

我使用该指令调用外部文件并将其附加到html正文中

在index.html中

<li popup-url="template2.html" center-nav-popup></li>

在popup.tpl.html模板文件中，它再次包含相同的指令，只是文件url不同。但是，该指令不起作用

popup.tpl.html

<table id="single_dropdown">
  <tr><td> Item 1</td></tr>
  <tr popup-url="template3.html"center-nav-popup><td>Item 2</td></tr>
  <tr><td> Item 3</td></tr>
  <tr><td> Item 4</td></tr>
</table>

项目1
项目2
项目3
项目4

有什么想法吗？

要使用templateCache，有两种方法。 1.定义类型为“text/ng template”的脚本标记

要使用templateCache，有两种方法。 1.定义类型为“text/ng template”的脚本标记

要使用templateCache，有两种方法。 1.定义类型为“text/ng template”的脚本标记

要使用templateCache，有两种方法。 1.定义类型为“text/ng template”的脚本标记

---

回答得好。但是我如何让您的解决方案使用Angular templatecache？编辑内容以使用模板缓存。更新小提琴-很好的答案。但是我如何让您的解决方案使用Angular templatecache？编辑内容以使用模板缓存。更新小提琴-很好的答案。但是我如何让您的解决方案使用Angular templatecache？编辑内容以使用模板缓存。更新小提琴-很好的答案。但是我如何让您的解决方案使用Angular templatecache？编辑内容以使用模板缓存。更新小提琴-

<table id="single_dropdown">
  <tr><td> Item 1</td></tr>
  <tr popup-url="template3.html"center-nav-popup><td>Item 2</td></tr>
  <tr><td> Item 3</td></tr>
  <tr><td> Item 4</td></tr>
</table>

angular.module('navPopup', [])
    .directive('navPopup', ['$document', '$compile', '$http', function ($document, $compile, $http) {
    return {
        restrict: 'EA',
        link: function (scope, element, attr) {

            // instead of binding to document click 
            //and validating it is current element, 
            //simply bind the event to the element
            element.on('click', function (event) {                                
                handler();                                
            });

            function handler() {

               $http.get(attr.popupUrl).then(function(response) {
                    // retrieve the external html file
                    var $raw_html = response.data;
                    var template = angular.element($raw_html);
                    $compile(template)(scope, function(ele) {
                        $document.find('body').append(ele);
                    }); 
                });
            }
        }
    }
    }]);

<script type="text/ng-template" id="template2.html">
        <table id="single_dropdown">
        </table>
</script>

link: function (scope, element, attr) {

        // instead of binding to document click and validating it is current element, simplt bind the event to the element
        element.on('click', function (event) {                                
            handler();                                
        });

        var appendPopUP = function(template) {
             $compile(template)(scope, function(ele) {
                $document.find('body').append(ele);
            });  
        };

        function handler() {

            var $raw_html = $templateCache.get(attr.popupUrl);                
            if ($raw_html) {
                appendPopUP(angular.element($raw_html));
            } else {
                $http.get(attr.popupUrl)
                    .then(function(response) {
                 var $raw_html = response.data;
                 $templateCache.put(attr.popupUrl, $raw_html);
                 appendPopUP(angular.element($raw_html));
                }
            }
        }
    }