<http://stackoverflow.com/questions/26805279/nested-ng-include-not-working-when-element-containing-the-ng-include-attribute-i#>
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 working plunker
<http://plnkr.co/edit/71Nudes4eTbz1RBX9gsb>. Now I don't know why when I
created this plunker the *_StudentDetailsTabs.html* is also not being
included.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
