javascript - 包含指令的附加 html 文件不起作用

Question

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

在index.html中

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

在 navpopup.js

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

                $document.on('click', function(event) if (element[0].contain(target.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);
                        var $popup = $compile(template)(scope);
                        $document.find('body').append($popup);
                    });
                }
            }
        }]);

在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>

有什么想法吗？

Answer 1

http://jsfiddle.net/1gagvfj3/

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);
                    }); 
                });
            }
        }
    }
    }]);

要使用 templateCache，有两种方法。1.定义Script标签，类型为“text/ng-template”

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

这里的id类似于文件名，所以我们可以在nginclude中使用id。

另一种方法是从服务器获取 html 并将内容放入模板缓存中，如下所示。这里检查模板是否在缓存中可用，如果没有从服务器获取模板，并将检索到的响应放入模板缓存中，然后，使用从缓存中获取的文件内容，而不是从服务器中检索。

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));
                }
            }
        }
    }