javascript - 在 $compile 中传递模板 URL

Question

我有一个场景，我需要在 $compile 中传递模板 URL 路径，而不是像下面这样的模板。

function addSubmenu() {
    scope.subMenuAdded = true;
    scope.subMenuVisible = true;
    scope.menuItemClickHandler = function(menuItem) {
        menuController.itemClickHandler.call(menuController, menuItem);
    };
    $compile('<apt-expandable-menu data-menu="menuItem.children" data-on-menu-item-click="menuItemClickHandler" ng-if="subMenuVisible"></apt-expandable-menu>')(scope, function(cloned){
        element.append(cloned);
    });
}

我需要传递如下所示的模板 URL，而不是 $compile 中的实际模板。

function addSubmenu() {
    scope.subMenuAdded = true;
    scope.subMenuVisible = true;
    scope.menuItemClickHandler = function(menuItem) {
        menuController.itemClickHandler.call(menuController, menuItem);
    };
    $compile('./expandableMenuChildItem.template.html')(scope, function(cloned){
        element.append(cloned);
    });
}

并在expandableMenuChildItem.template.html中:

<apt-expandable-menu data-menu="menuItem.children" data-on-menu-item-click="menuItemClickHandler" ng-if="subMenuVisible"></apt-expandable-menu>

但它给我一个错误:

angular.js:14199 错误:语法错误，无法识别的表达式:./expandableMenuChildItem.template.html

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用$templateRequest服务。就像这样:

$templateRequest('nameOfTemplate.html').then(function(template){
    $compile(template)(scope, ..);
});