在AngularJS中进行转换，重复多个元素

Question

我正在使用Angularjs 1.6，我做了这种翻译类型的东西。

var app = angular.module('plunker', []);

        app.controller("mainCtrl", function ($scope) {

            $scope.testmodel1 = {
                testmodel1prop: "testmodel1prop"
            };

            $scope.testmodel2 = {
                testmodel2prop: "testmodel2prop"
            }
        })

        app.directive('tabs', function ($compile) {
            return {
                restrict: 'E',
                scope: {},
                transclude: true  ,

                link: function (scope, el, attrs, ctrl, transcludeFn) {
                    // transcluded content's scope should inherit from parent
                    transcludeFn(scope.$parent, function (clonedTranscludedContent) {

                        var tabs = [];

                        for (var i = 1; i < clonedTranscludedContent.length; i = i + 2) {
                            tabs.push(clonedTranscludedContent[i]);
                        }

                        for (var i = 0; i < tabs.length; i++) {
                            debugger;
                            var jqueryTab =  $(clonedTranscludedContent[1]);
                            var stringTab = jqueryTab.prop('outerHTML');
                            var model = jqueryTab.attr('model');
                            var pocoModelFromParent = scope.$parent[model];
                            var newScope = angular.merge(scope.$parent.$new(), pocoModelFromParent)

                            var linkFn = $compile(stringTab);
                            var compiledContent = linkFn(newScope);
                            el.append(compiledContent);

                        }

                    });
                }
            };
        });


        app.directive('test', function () {
            return {
                restrict: 'E',
                scope: {},
                link: function ($scope, $element, attr) {
                    $scope.var1 = "test";
                },
                template: '<p>{{ var1 }}</p>'
            };
        });





<div ng-app="plunker" >

        <div ng-controller="mainCtrl">

            <tabs>

                <tab model="testmodel1" title="tab2">{{ testmodel1prop }}</tab>

                <tab model="testmodel2" title="tab1"> {{ testmodel2prop }} </tab>

            </tabs>

        </div>
    </div>

如果可以，我想得到一些反馈。

顺便说一句，它完美无缺。

首先出现在我脑海中的是为什么＆clunkTranscludedContent＆＃39;在位置1 3 5 7处有一种空物体，依此类推。我还没弄明白那是什么，可能是::之前的铬？

我计划在生产中使用它。