javascript - 当包含 ng-include 属性的元素本身使用 angularjs 中的 ng-include 属性添加时，嵌套 ng-include 不起作用

Question

Please check this demo plunker更好地理解我的问题。

在我的主页上有一个表格。每个表行后面都有一个最初隐藏的空行。单击第一行时，我使用指令在其下方的空行中注入(inject) html

主页索引.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>

指令用于在点击第一行时注入(inject) html:

    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");

                }
            });
        }
    };
});

现在，当单击第一行时，跨度将包含在空行中，该空行本身包含ng-include="_StudentDetailsTabs.html"。 _StudentDetailsTabs.html 部分已正确包含，我对此没有任何问题。但是 _StudentDetailsTabs.html 部分本身包含另外三个不起作用的 ng-include 属性。

_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>

现在，当上面的部分 _StudentDetailsTabs.html 包含到空行中时，为什么其中的 ng-includes (_StudentDetailsTabs.html) 不起作用。为什么它不包括部分内容？

编辑: Here is the demo plunker 。现在我不知道为什么，当我创建这个插件时， _StudentDetailsTabs.html 也没有被包含在内。

Answer 1

你的 ng-includes 是错误的，它们应该用引号引起来，就像你应该传递一个字符串

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'".

所以你需要改变

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

至

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

等等