现在在在角code子功能compileNodes功能，有这些行：

Now in the compileNodes function in a sub function in the angular code, there are these lines:

} else if (childLinkFn) {
  childLinkFn(scope, node.childNodes, undefined, boundTranscludeFn);
}

在我的自定义选项卡的指令，我得到的错误：无法读取的未定义的属性'子节点'：当试图手动编译模板指令（以点击功能动态添加到标签）与此code：

In my custom tabs directive, I am getting the error : Cannot read property 'childNodes' of undefined : when trying to manually compile the template for the directive (in order to dynamically add click functionality to the tabs) with this code:

nucleusAngular.directive('nagTabs', ['$timeout', '$http', '$compile', 'nagDefaults', function($timeout, $http, $compile, nagDefaults){
    return {
        restrict: 'A',
    scope: {
      options: '=nagTabs'
    },
        compile: function() {
            return {
                pre: function(scope, element, attributes) {
                    var template = $('<div />').append($(element).html());
                    scope.options = nagDefaults.getTabsOptions(scope.options);

                    template.find('.tabs .tab').each(function(key, value) {
                        template.find('.tabs .tab:nth-child(' + (key + 1) + ')').attr('ng-click', 'switchTab(\'' + $(this).data('tab') + '\')');
                    });

                    element.html($compile(template)(scope));
                    $(element).addClass('nag-tabs');
                },
                post: function(scope, element, attributes) {
                    var $element = $(element);
                    scope.switchTab = function(tab) {
                        if(angular.isNumber(tab)) {
                            //todo: this should work
                            //tab = $(element).find('.tabs li:nth-child(' + tab + ')').data('tab');
                            tab = $(element).find('.tabs .tab:nth-child(' + (tab + 1) + ')').data('tab');
                    }

                        $(element).find('.tabs .tab').removeClass('active');
                        $(element).find('.tabs .tab[data-tab="' + tab + '"]').addClass('active');

                        $(element).find('.tab-content-item').removeClass('active');
                        $(element).find('.tab-content-item[data-tab="' + tab + '"]').addClass('active');
                    }

                    //load the default tab
                    $timeout(function(){scope.switchTab(scope.options.defaultTab);}, 0);
                }
            };
        }
    }
}]);

HTML

<div nag-tabs="tabsOptions">
    <ul class="tabs">
        <li data-tab="html" ng-click="switchTab('html')">HTML</li>
        <li data-tab="javascript" ng-click="switchTab('javascript')">JavaScript</li>
    </ul>
    <div class="tab-content">
        <div data-tab="html" class="tab-content-item">
            html...
        </div>
        <div data-tab="javascript" class="tab-content-item">
            javascript...
        </div>
    </div>
</div>

现在也许我没有正确编译，但是我想尽单路我能想到的编译模板的模板，我要么得到我所提到的或功能只是不工作的错误。看完后，周围好像这个错误可以与具有空文本节点出现。因为我什么都试过了我能想到的在我的code，我走进了角code和修改了三线看起来像这样（我只修改了第一行）：

Now maybe I am not compiling the template correctly however I have tried every single way I can think of to compile the template and I either get the error I mentioned or the functionality just does not work. After reading around it seems like this error can comes up with having an empty text node. Since I tried everything I could think of in my code, I went into the angular code and modified the three line to look like this (I only modified the first line):

} else if (childLinkFn && node) {
  childLinkFn(scope, node.childNodes, undefined, boundTranscludeFn);
}

这验证节点实际存在的，看它是否应该调用childLinkFn（虽然我不是100％地肯定这种变化的影响，如果节点不等于什么这似乎在childLinkFn不应该执行）。有了这个code，我的标签code完美地工作（我还没有在我的其他指令注意到任何其他问题）。然后，我克隆了angular.js库和应用这一变化，建成角，然后执行单元测试和最终2终端的测试，他们都通过了。

This verifies that the node actually exists to see if it should call the childLinkFn (while I am not 100% sure the effect of this change, it would seem if node does not equal something, the childLinkFn should not be executed). With this code in place, my tabs code works perfectly (and I have not noticed any other issues in my other directives). I then cloned the angular.js repository and applied this change, built angular, and then executed the unit tests and end 2 end tests and they all passed.

我的问题是我做错了什么的我是多么的编制应我提出这个code变化作为一个拉请求（注意我工作的1.1.3版本）选项卡中的模板？

My question is am I doing something wrong in how I am compiling the template for the tabs of should I submit this code change as a pull request (note I am working on the 1.1.3 version)?

推荐答案

在最后，我皆已格式的指令。不完全知道如何工作的，并传回pre /后一个对象不，但它确实工作。该指令code现在看起来是这样的：

In the end, I have switched the format for the directive. Not exactly sure how this works and returning an object with pre/post does not but it does work. The directive code now looks like this:

nucleusAngular.directive('nagTabs', ['$timeout', '$http', '$compile', 'nagDefaults', function($timeout, $http, $compile, nagDefaults){
return {
    restrict: 'A',
scope: {
  options: '=nagTabs'
},
    compile: function(element, attributes, transclude) {
  $(element).find('.tabs .tab').each(function(key, value) {
    $(element).find('.tabs .tab:nth-child(' + (key + 1) + ')').attr('ng-click', 'switchTab(\'' + $(this).data('tab') + '\')');
  });

  //element.html($compile(template)(scope));
  $(element).addClass('nag-tabs');

return function(scope, element, attributes) {
    scope.options = nagDefaults.getTabsOptions(scope.options);
    var $element = $(element);
    scope.switchTab = function(tab) {
      if(angular.isNumber(tab)) {
        //todo: this should work
        //tab = $(element).find('.tabs li:nth-child(' + tab + ')').data('tab');
        tab = $(element).find('.tabs .tab:nth-child(' + (tab + 1) + ')').data('tab');
      }

      $(element).find('.tabs .tab').removeClass('active');
      $(element).find('.tabs .tab[data-tab="' + tab + '"]').addClass('active');

      $(element).find('.tab-content-item').removeClass('active');
      $(element).find('.tab-content-item[data-tab="' + tab + '"]').addClass('active');
    }

    //load the default tab
    $timeout(function(){scope.switchTab(scope.options.defaultTab);}, 0);
        }
    }
}
}]);