Question

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

在我的主页中，我有一张桌子。每个表行后跟一个最初隐藏的空行。当点击第一行时，我使用指令

在其下面的空行中注入html

主页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>

指令用于在第一行点击时注入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 =＆＃34; _StudentDetailsTabs.html＆＃34; 。 _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。现在我不知道为什么，当我创建这个plunker时， _StudentDetailsTabs.html 也没有被包括在内。

Answer 1

你的ng-includes是错误的，它们应该带引号，因为你应该传递一个字符串

ngInclude |串
角度表达式评估为URL。如果源是字符串常量，请确保将其包装在单引号中，例如SRC = “ 'myPartialTemplate.html'”。

所以你需要改变

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

到

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

等等

Answer 2

你的掠夺者读<span ng-include="'/_FileName.html'">。它应该是<span ng-include="'_FileName.html'">，而不是那些正斜杠。

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

2 个答案: