app加载后，AngularJS动态添加ng-include

I have an update button with a directive. When the button is clicked, the targeted element should receive some new html which includes a ngInclude element. It does not seem to be loading the file though, all it does is include a comment like this . If I log the tpl variable I get { 0: , length: 1 }. Here is my directive and element generator code.

我有一个带有指令的更新按钮。当单击按钮时，目标元素应该接收一些新的html，其中包含一个ngInclude元素。它似乎并没有加载文件，但是它所做的只是包含一个这样的注释。——ngInclude:导航。html - - >。如果我记录tpl变量，我会得到{0: ，长度:1}。这是我的指令和元素生成器代码。

Directive

指令

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

Generator

发电机

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

2 个解决方案

#1

You would need to compile the place where you inserted generated content.

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

.directive('contentControl', ['$compile' ,function($compile){
    return {
      template: 'Click here',
      link: function(scope, element, attrs) {
          element.bind('click', function () {
              var html = "<p>Template:</p><div ng-include src=\"'template.html'\"></div>";

              var templateGoesHere = angular.element(document.getElementById('templateGoesHere'));
              templateGoesHere.html(html);

              $compile(templateGoesHere)(scope);

              scope.$apply();
          });
      }
    }
}]);

See Plunker

看到一美元

#2

$compile(element)(scope) returns an element that you should place in the DOM. The .html() part of your code is just inserting your uncompiled html, and you're not doing anything with the compiled element. Instead, you could do something like:

$compile(元素)(范围)返回您应该在DOM中放置的元素。代码的.html()部分只是插入未编译的html，对已编译的元素没有任何作用。相反，你可以这样做:

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

#1