AngularJS在加載應用程序後動態添加ng-include

我有一個帶有指令的更新按鈕。點擊按鈕時，目標元素應該會收到一些包含ngInclude元素的新html。它似乎沒有加載該文件，但它所做的只是包含像這樣的註釋。如果我登錄tpl變量，我會得到{ 0: , length: 1 }。這是我的指令和元素生成器代碼。AngularJS在加載應用程序後動態添加ng-include

指令

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; 
    } 
}

來源

2015-04-04 Silas

你需要做的'$範圍。$適用（）'從點擊事件運行週期消化 – 2015-04-04 06:00:11

@pankajparkar感謝您的答覆。我已經更新了我的答案。我發現'$ compile'需要在將它添加到元素之後。我也添加了'scope。$ apply（）'。它現在將加載這些文件，但它仍然不會將這些文件的內容應用於'ng-include' – Silas 2015-04-04 06:50:27

您需要編譯插入生成內容的位置。

.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

來源

2015-04-04 08:10:13 sbedulin

這爲我工作。謝謝您的幫助。 – Silas 2015-04-05 02:47:25

我的問題是我忘了在我的解決方案中調用scope。$ apply（）。謝謝 – 2016-02-18 15:11:39

$compile(element)(scope)返回，你應該在DOM放置的元素。你的代碼的.html()部分只是插入你的未編譯的html，而你沒有對編譯的元素做任何事情。相反，你可以這樣做：

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

來源

2015-04-04 08:01:17 Sacho

我無法通過這種方式使它工作。編譯元素，而不是HTML的工作。 – Silas 2015-04-05 02:50:52

AngularJS在加載應用程序後動態添加ng-include

回答

相關問題