Nested ng-include not working when element containing the ng-include attribute is itself added using ng-include attribute in angularjs

Question

Please check this demo plunker to understand my problem better.

In my main page I've a table. Each table row is followed by an empty row which is hidden initially. When clicked on first row, I am injecting html within the empty row below it using directive

Main Page Index.html:

<tr ng-repeat-start="student in Students" class="rowDirctive">
   <td>{{student.FirstName}}</td>
   <td>{{student.LastName}}</td>
</tr>
<!--Empty row-->
<tr class="empty-row" style="display:none" id="{{student.Id}}" ng-repeat-end>
   <td colspan="2"></td>
</tr>

Directive used for injecting html on click of first row:

    appRoot.directive('rowDirctive', function ($compile) {
    return {
        restrict: 'C',
        replace: false,
        link: function (scope, element) {
            element.bind("click", function () {
                var rowId = "#"+scope.student.Id;
                var innerhtml = angular.element($compile('<span class="" ng-include="\'_StudentDetailsTabs.html\'">' +
                                '</span>')(scope));

                if ($(rowId + " td span").length === 0) {
                    $(rowId + " td").html(innerhtml);
                }

                if ($(rowId).is(':hidden')) {
                    $(rowId).slideDown("slow");
                } else {
                    $(rowId).slideUp("slow");

                }
            });
        }
    };
});

Now when click on first row, the span is included within the empty row which itself contains ng-include="_StudentDetailsTabs.html". The _StudentDetailsTabs.html partial is included properly, I've no issue with it. But the _StudentDetailsTabs.html partial itself contains another three ng-include attributes which are not working.

_StudentDetailsTabs.html:

   <tabset>
       <tab heading="Personal Details" ng-click="PersonalDetails()">
          <span ng-include="_PersonalDetails.html"  ng-controller="StudentDetailsCtrl"></span>
       </tab>
       <tab heading="Educational Details" ng-click="EducationalDetails()">
          <span ng-include="_EducationalDetails.html" ng-controller="StudentDetailsCtrl"></span>
       </tab>
    </tabset>
  <br><br>
  <span ng-include="_OtherDetails.html" ng-controller="StudentDetailsCtrl"></span>

Now when the above partial _StudentDetailsTabs.html is included into the empty row, why the ng-includes within it (_StudentDetailsTabs.html) not working. Why its not including the partials?

Edit: Here is the demo plunker. Now I don't know why, when I created this plunker the _StudentDetailsTabs.html is also not being included.

There should be no problem with nested in-includes. The problem is probably somewhere else. Could you post a plunker with your not-working example? — lukaszfiszer
– lukaszfiszer, Commented Nov 7, 2014 at 16:20

Sebastian Piu · Accepted Answer · 2014-11-08 15:13:50Z

1

Your ng-includes are wrong, they should be with quotes, as in you should be passing a string

ngInclude | string
angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in single quotes, e.g. src="'myPartialTemplate.html'".

so you need to change

<span ng-include="_PersonalDetails.html"  ...></span>

to

<span ng-include="'_PersonalDetails.html'"  ...></span>

and so on

answered Nov 8, 2014 at 15:13

Sebastian Piu

8,0581 gold badge35 silver badges51 bronze badges

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

1 Comment

Sebastian Piu Over a year ago

There is something else that is wrong too then. Can you look into the plunkr so it matches your current problem?

Arthur Alkmim · Accepted Answer · 2015-01-21 16:54:04Z

0

Your plunker reads <span ng-include="'/_FileName.html'">. It should read <span ng-include="'_FileName.html'">, without those forward slashes.

answered Jan 21, 2015 at 16:54

Arthur Alkmim

2371 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Nested ng-include not working when element containing the ng-include attribute is itself added using ng-include attribute in angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related