Question

我有一个非常简单的html页面，我使用ng-include加载两个不同的html文件： -

<body ng-controller="testCtrl">
    <div class="panel panel-primary">
        <h3 class="panel-heading">Test</h3>
        <ng-include src="'View/Details.html'" ng-show="details" />
        <ng-include src="'View/Summary.html'" ng-show="summary" />
    </div>
</body>

最初只有details变量为true，因此它正在加载Details视图，如下所示： -

<div class="panel-body">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
        </tbody>
    </table>
</div>

这里是控制器供参考： -

.controller("testCtrl", function ($scope) {
     $scope.loadItems = function () {
          $scope.items= [
              { id: 1, name: "dummy" },
              { id: 2, name: "dummy1" },
              { id: 3, name: "dummy2" }
            ];
          }
        $scope.loadItems();
      }

当我加载页面时，它正在正确显示数据，但没有事件被触发（所有按钮点击处理程序都通过ng-click附加到与控制器中定义的行为相关联）所以我继续检查控制台，它显示以下错误： -

TypeError：无法读取属性＆＃39; insertBefore＆＃39;为null 在forEach.after（myUrl）在Object.JQLite。（匿名函数）[as after]

我对Angular很新。我看到很少的线程，并试图操纵我的标记代码，但没有运气。

Answer 1

你不能<ng-include/> - 应该是<ng-include></ng-include>。 ng-if通常比ng-show更好，因为它减少了结果html的数量。

休息工作：plnkr.co/edit/EmUYuHltWaXnjEC6juid?p=preview.

无法读取属性＆＃39; insertBefore＆＃39;在forEach.after中为null

1 个答案: