CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Saurabh Palatkar
Saurabh Palatkar

Reputation: 3384

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

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.

Upvotes: 1

Views: 1251

Answers (2)

Arthur Alkmim
Arthur Alkmim

Reputation: 237

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

Upvotes: 0

Sebastian Piu
Sebastian Piu

Reputation: 8008

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

Upvotes: 1

Related Questions