javascript - AngularJs 在指令中使用 ng-repeat 会出现类型错误

Question

我刚刚开始使用 angularjs。我创建了一个 Controller 和一个指令。该指令用于创建选项卡内容， Controller 管理选项卡的内容。

Controller :

myApp.controller('companySalesController', function ($scope) {
  $scope.sales = [
    {
      date:"August, 14th 2014",
      action:"Sold Best sports watches via Online Coupone",
      earning:"50$"
    }
  ]
});

指令:

myApp.directive("myTabs", function () {
  return {
    restrict: "E",
    transclude:false,
    scope:false,
    controller: ['$scope','$element','$sce','$compile', function ($scope, $element,$sce,$compile) {
      var titles = $('.titles li',$element).get();
      var separator = angular.element("<div class='separator'><ul class='tabs-highlight'></ul></div>");
      $('.titles',$element).after(separator);
      for(var i=0; i< titles.length;i++){
        var title = titles[i];
        title.setAttribute('ng-click','selectTab('+i+')');
        $('.tabs-highlight',separator).append("<li></li>");
      }
      $('.titles li').css({
        width:($('.titles').width()/titles.length)
      });
      $('.separator li').css({
        width:($('.titles').width()/titles.length)
      });

      $compile($element.contents())($scope);

      $scope.selectTab = function (index) {
        $('ul.titles li').removeClass('select');
        $('ul.titles li:nth-child('+(index+1)+')').addClass('select');
        $('ul.tabs-highlight li').removeClass('select');
        $('ul.tabs-highlight li:nth-child('+(index+1)+')').addClass('select');
        $('div.tab-contents > div').removeClass('select');
        $('div.tab-contents > div:nth-child('+(index+1)+')').addClass('select');
      }
    }]
  }
});

指令html代码:

<my-tabs class="my-tabs">
<ul class="titles">
    <li>Published Rewards</li>
    <li>Pending Rewards</li>
    <li>Sales Overview</li>
</ul>
<div class="tab-contents">
    <div>

    </div>
    <div>

    </div>
    <div>
        <table class="company-sales">
            <tr>
                <th>Date</th>
                <th>Action</th>
                <th>Earning</th>
            </tr>
            <tr ng-repeat="s in sales">
                <td>{{s.date}}</td>
                <td>{{s.action}}</td>
                <td>{{s.earning}}</td>
            </tr>
        </table>
    </div>
</div>

我收到此错误，但我不知道为什么:

TypeError: Cannot read property 'childNodes' of undefined

当我删除 ng-repeat 行时，错误就会消失。

任何建议都值得采纳

Answer 1

指令的 Controller 不正确controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... }

$sce 应该位于 attrs 和 transinclude 之后。即使您不使用它，也需要将两者都包含在内