javascript - AngularJS add ng-include dynamically after app is loaded - Stack Overflow

admin管理员组

文章数量:1315110

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 ment like this <!-- ngInclude: nav.html -->. If I log the tpl variable I get { 0: <!-- ngInclude: nav.html -->, length: 1 }. Here is my directive and element generator code.

Directive

angular.module('myApp').directive("contentControl"
,["$pile"
,function($pile){
    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);
                $pile(html)(scope);
                scope.$apply();
            });
        }
    }
}]);

Generator

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

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 ment like this <!-- ngInclude: nav.html -->. If I log the tpl variable I get { 0: <!-- ngInclude: nav.html -->, length: 1 }. Here is my directive and element generator code.

Directive

angular.module('myApp').directive("contentControl"
,["$pile"
,function($pile){
    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);
                $pile(html)(scope);
                scope.$apply();
            });
        }
    }
}]);

Generator

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

• javascript
• jquery
• angularjs

Share Improve this question Follow edited Apr 4, 2015 at 6:48 Silas asked Apr 4, 2015 at 5:48 SilasSilas 22144 silver badges1616 bronze badges 2

• you need to do $scope.$apply() from click event to run digest cycle – Pankaj Parkar Commented Apr 4, 2015 at 6:00
• 1 @pankajparkar thanks for the response. I have updated my answer. I found that the $pile 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 Commented Apr 4, 2015 at 6:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

.directive('contentControl', ['$pile' ,function($pile){
    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);

              $pile(templateGoesHere)(scope);

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

See Plunker

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

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

本文标签： javascriptAngularJS add nginclude dynamically after app is loadedStack Overflow