Question

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

控制器：

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：无法读取未定义
的属性'childNodes'

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

任何建议都是适当的

Answer 1

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

$ sce应该在追逐和转换之后出现。即使您没有使用它，也需要包括两者

AngularJs在指令中使用ng-repeat会产生类型错误

1 个答案: