AngularJS add ng-include dynamically after app is loaded

Question

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.

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

you need to do $scope.$apply() from click event to run digest cycle — Pankaj Parkar
– Pankaj Parkar, Commented Apr 4, 2015 at 6:00
@pankajparkar thanks for the response. I have updated my answer. I found that the $compile needed to be after adding it to the element. I have added scope.$apply() also. It will now load the files but it still does not apply the contents of those files into the ng-include — Silas
– Silas, Commented Apr 4, 2015 at 6:50

sbedulin · Accepted Answer · 2015-04-04 08:10:13Z

6

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

answered Apr 4, 2015 at 8:10

sbedulin

4,4101 gold badge26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marek Pavelek Over a year ago

My problem was that i forgot to call scope.$apply() in my solution. Thank you

Sacho · Accepted Answer · 2015-04-04 08:01:17Z

1

$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:

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

answered Apr 4, 2015 at 8:01

Sacho

2,1891 gold badge14 silver badges13 bronze badges

1 Comment

Silas Over a year ago

I was not able to get this to work doing it this way. Compiling the element instead of the html worked.

Collectives™ on Stack Overflow

AngularJS add ng-include dynamically after app is loaded

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related