AngularJS不能未定義錯誤的讀取屬性「的childNodes」

Question

現在在角碼的子功能compileNodes功能，有這些行：

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

在我的自定義選項卡的指令，我得到錯誤：無法讀取的未定義的屬性「的childNodes」：試圖手工編譯的模板指令（以動態添加點擊功能選項卡）使用此代碼時：

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> 

現在也許我沒有正確地編譯模板，但是我已經嘗試了我能想到的編譯模板的每一種方法，並且我得到了我提到的錯誤或功能不起作用。閱讀後，似乎這個錯誤可能會出現一個空的文本節點。因爲我想我可以在我的代碼想到的一切，我走進角度代碼和修改將三個線條，看起來像這樣（我只是修改了第一行）：

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

這驗證節點確實存在看看它是否應該調用childLinkFn（雖然我不是100％確定這種改變的效果，但看起來如果節點不等於某些東西，則不應該執行childLinkFn）。有了這個代碼，我的標籤代碼完美地工作（我沒有注意到其他指令中有任何其他問題）。然後，我克隆了angular.js存儲庫，並應用此更改，構建了角度，然後執行單元測試並結束2個最終測試，並且它們全部通過。

我的問題是我做錯了我如何編譯標籤的模板，我應該提交這個代碼更改爲拉請求（注意我正在1.1.3版本）？

Answer 1

最後，我切換了指令的格式。不完全確定這是如何工作的，並且用pre/post返回對象不會但它確實有效。該指令代碼現在看起來像這樣：

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