Javascript AngularJS在加载应用程序后动态添加ng include

我有一个带有指令的更新按钮。单击按钮时，目标元素应该会收到一些新的html，其中包括一个ngInclude元素。不过，它似乎并没有加载该文件，它所做的只是包含一条类似这样的注释

。如果我记录

tpl

变量，我会得到

{0:，长度：1}

。这是我的指令和元素生成器代码

指示

angular.module('myApp').directive("contentControl"
,["$compile"
,function($compile){
    return {
        link: function(scope, element, attrs) {
            element.bind("click", function () {
                var $container = $(this).closest('#editor_contenteditorcontainer');
                var html = "";
                $container.find('.row').each(function () {
                    var $args = $(this).find('form').serializeObject();
                    html += ' ' + generateContent($args);
                });
                angular.element(document.getElementById('responsiveviewport')).html(html);
                $compile(html)(scope);
                scope.$apply();
            });
        }
    }
}]);

发电机

function generateContent($arg){
  switch($arg['name']){
    case 'Partial':
        return '<div ng-include src="\''+$arg['content']+'\'"></div>';
        break;
    default:
        break;
  }
}

函数generateContent（$arg）{
开关（$arg['name']））{
“部分”情况：
返回“”；
打破
违约：
打破
}
}

$compile（element）（scope）

返回应该放在DOM中的元素。代码的

.html（）

部分只是插入未编译的html，而没有对已编译的元素执行任何操作。相反，您可以执行以下操作：

angular.element(el).empty().append($compile(html)(scope))

---

您需要编译插入生成内容的位置

.directive（'contentControl'，['$compile'，function（$compile）{
返回{
模板：“单击此处”，
链接：函数（范围、元素、属性）{
元素绑定（'单击'，函数（）{
var html=“模板：
”；
var templategoesher=angular.element（document.getElementById（'templategoesher'））；
html（html）；
$compile（templategoesere）（范围）；
作用域：$apply（）；
});
}
}
}]);

---

您需要从单击事件运行摘要执行

$scope.$apply（）

cycle@pankajparkar谢谢你的回复。我已经更新了我的答案。我发现在将

$compile

添加到元素之后需要对其进行修改。我还添加了

范围。$apply（）

。它现在将加载文件，但它仍然不会将这些文件的内容应用到

ng include

中。我无法以这种方式使其工作。编译元素而不是html起作用了。我的问题是我忘了在解决方案中调用scope.$apply（）。非常感谢。