如何在指令angularJS中包含html文件

Question

在index.html中

<li nav-popup-url="popover.tpl.html" nav-popup-width="400" nav-popup-trigger="click" nav-popup> List 1 </li>

在navPopup.js

中

angular.module('navPopup',[])
.directive('navPopup',['$document','$compile', function($document,$compile){

    return {
        restrict: 'EA',
        link: function(scope, element, attr){

            if(attr.navPopupTrigger == "click"){
                $document.on('click', handler);
            }

            function handler(event){

                if(!element[0].contains(event.target)){
                }else{
                    var template = angular.element("<div style='background-color:red'><br/></div>");
                    var navPopupurl = attr.navPopupUrl;

                    console.log(attr.navPopupUrl);
                    var $popup = $compile(template)(scope);
                    template.remove();
                    $document.find('body').append($popup);

                }

            }

        }

    }

}]);

目前，在上面的navPopup.js中，我使用的是内部html元素。

var template = angular.element("<div style='background-color:red'><br/></div>");

如何更改此行代码以使其包含index.html中指定的外部html文件（nav-popup-url =＆＃34; popover.tpl.html＆＃34;），其中包含{{1} }？