如何以编程方式将指令附加到angular-ui手风琴？

Question

我试图通过$ compile机制以编程方式将自定义指令附加到angular-ui手风琴上。我正在使用一个所谓的主指令，其模板包含手风琴标记。在链接功能中，我尝试做这样的事情：

link: function (scope, element, attrs) {

        var setEl = function (obj) {

            var el = $templateRequest('assets/templates/testing.html').then(function (html) {

                var template = angular.element(html);

                var parent = element[0].querySelector('#test-0');

                angular.element(parent).injector().invoke(function ($compile) {

                    parent.append($compile(template.contents())(scope));
                });

            });
        };

        var getDir = function (title) {

            var obj = {

                title: title,
                el: null,
                isHeaderOpen: false
            };

            setEl(obj);

            return obj;
        };

        scope.dirs = [

            getDir('first')
        ];
    },

在我的HTML中，我有：

 <div uib-accordion-group class="panel-default" ng-repeat="dir in dirs">
    <uib-accordion-heading>
        <div ng-click="testing()">
            {{dir.title}} <i class="pull-right glyphicon"
                        ng-class="{'glyphicon-chevron-down': dir.isHeaderOpen, 'glyphicon-chevron-right': !dir.isHeaderOpen}"></i>
        </div>
    </uib-accordion-heading>
    <span id="test-{{$index}}">{{dir.el}}</span>
</div>

但是，附加的内容是：[[Object Text]]

有人能看到问题吗？