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存储库并应用了这个更改，构建了angular，然后执行了单元测试并结束了2个结束测试，它们都通过了。

我的问题是我是否在编写标签模板方面做错了我应该将此代码更改作为拉取请求提交（请注意我正在处理1.1.3版本）？

Answer 1

最后，我已经切换了指令的格式。不完全确定这是如何工作的并返回一个带有前/后的对象不会，但它确实有效。指令代码现在看起来像这样：

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

AngularJS无法读取未定义错误的属性'childNodes'

1 个答案: