AngularJs在指令中使用ng-repeat给出类型错误

Question

I've just started using angularjs. I have created a controller and a directive. The directive is to create a tabs content, the controller manages the tabs' contents.

the controller:

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

the directive:

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');
      }
    }]
  }
});

the directive html code:

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

I get this error and I have no idea why:

TypeError: Cannot read property 'childNodes' of undefined

When i remove the ng-repeat lines then error dissappears.

Any suggestion is appriciated

Answer 1

The controller of your directive is not correct controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... }

$sce should come after attrs and transclude. You need to include both even if you are not using it