4

angularコードのサブ関数のcompileNodes関数には、次の行があります。

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

私のカスタム タブ ディレクティブで、次のコードを使用して (タブにクリック機能を動的に追加するために) ディレクティブのテンプレートを手動でコンパイルしようとすると、エラー : Cannot read property 'childNodes' of undefined : が発生します。

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>

テンプレートを正しくコンパイルしていない可能性がありますが、テンプレートをコンパイルするために考えられるすべての方法を試しましたが、前述のエラーが発生するか、機能が機能しません。読んだ後、空のテキストノードがあるとこのエラーが発生する可能性があるようです。コードで考えられるすべてを試したので、Angular コードに入り、3 行を次のように変更しました (最初の行のみを変更しました)。

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

これにより、ノードが実際に存在し、childLinkFn を呼び出す必要があるかどうかが確認されます (この変更の影響を 100% 確信しているわけではありませんが、ノードが何かに等しくない場合は、childLinkFn を実行しないように思われます)。このコードを配置すると、私のタブ コードは完全に機能します (そして、他のディレクティブに他の問題は見られませんでした)。次に、angular.js リポジトリのクローンを作成し、この変更を適用し、angular をビルドしてから、単体テストを実行し、2 つの終了テストを終了すると、すべて合格しました。

私の質問は、このコード変更をプル リクエストとして送信する必要があるタブのテンプレートをコンパイルする方法に何か問題がありますか (私は 1.1.3 バージョンで作業していることに注意してください)。

4

1 に答える 1

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);
        }
    }
}
}]);
于 2013-04-03T23:15:20.090 に答える