angularjs - AngularJS：ng-include 在动态 html 中不起作用

Question

我是 AngularJS 的新手。我正在尝试ng-include动态使用该指令，但它不起作用。例如

var template = '<div ng-include="/app/partials/HtmlPage.html"></div>'

Answer 1

来自Angular 文档：

If the source is a string constant, make sure you wrap it in quotes, e.g. src="'myPartialTemplate.html'".

尝试将这些内引号添加到您的字符串模板名称中。

var template = '<div ng-include="\'/app/partials/HtmlPage.html\'"></div>'

（注意你必须转义你的内引号，因为你已经在一个字符串中）

Answer 2

您应该显示更多代码。我有一个指令，用于在我的指令模板中使用 ng-include 动态加载和使用不同的模板。看到这是如何工作的，我无法想象你会做什么会导致 ng-include 不起作用。您是否检查过检查器或其他任何东西以查看它是否加载了您的 HTMLPage.html 或获得了 404？

directive("dynamicFormInput", ['$http', '$templateCache', function($http, $templateCache){
    return {
        restrict: 'E',
        scope: {model: '=', section: '='},
        template: '<ng:include src="tpl"></ng:include>',
        link: function(scope, iElement, iAttrs) {
            switch(scope.section.sectionTypeId)
            {
                case 1:
                    $http.get('partials/survey/textInput.html', {cache:$templateCache});
                    scope.tpl="partials/survey/textInput.html";
                break;
                case 2:
                    $http.get('partials/survey/selectOneOption.html', {cache:$templateCache});
                    scope.tpl="partials/survey/selectOneOption.html";
                break;
                case 3:
                    $http.get('partials/survey/multiSelectOption.html', {cache:$templateCache});
                    scope.tpl="partials/survey/multiSelectOption.html";
                break;
                case 4:
                    $http.get('partials/survey/boolean.html', {cache:$templateCache});
                    scope.tpl="partials/survey/boolean.html";
                break;
                case 5:
                    $http.get('partials/survey/multiSelectOption.html', {cache:$templateCache});
                    scope.tpl="partials/survey/multiSelectOption.html";
                break;
                case 6:
                    if(scope.section.sectionId == 19){
                        $http.get('partials/survey/addressSelection.html', {cache:$templateCache});
                        scope.tpl="partials/survey/addressSelection.html";
                    }
                break;
            }
        }
    }
}])