Wie man richtig kopieren/Klonen DOM-element und dann auf einfügen/einfügen als HTML-element in Angular.js?

Also ich habe so große webapp verwendet Angular.js.
Kleinen Teil dieser webapp ist die sidebar, die zur Zeit, zeigt zwei div-Container: eine, die zeigt, dass Benutzerprofil-Statistiken (thumbnail -, Ruf -, Nachrichten -, einige Fähigkeiten .etc) und zweitens die Schieberegler (angular-ui) carousel zeigt einige Bilder.

Was ich tun möchte, ist zu Klonen, diese ganzen Fähigkeiten, die sidebar und fügen Sie diesen geklonten DOM-Objekt in Schieberegler wie einer anderen Folie, aber umgewandelt in das HTML-element.

Hier den code von diesem regler:

<div id="scrolling-sidebar">
  <carousel interval="myInterval">
    <slide ng-repeat="slide in slides" active="slide.active">
      <a href="{{slide.link}}" ng-if="$index != 1">
        <img ng-src="{{slide.image}}" />
      </a>
      <a href="{{slide.link}}" ng-bind-html="slide.content"></a>
    </slide>
  </carousel>
</div>

Hier ist Teil dieses ganzen sidebar-controller .Kaffee-Skript:

'use strict'

angular.module('someApp')
  .controller 'SidebarCtrl', ($scope, $modal, $http, $location, settings) ->


    $scope.myInterval = 5000
    $scope.slides = [
        {
            image: "/images/_getpro_banners1.png"
            link: "#/get-pro"
        }
        {
            content: $("#profile-skills-sidebar").clone()
            link: "#/get-pro" 
        }
        {
            image: "/images/_getpro_banners2.png"
            link: "#/get-pro"
        }
        {
            image: "/images/_getpro_banners3.png"
            link: "#/get-noticed"
        }
        {
            image: "/images/_getpro_banners4.png"
            link: "#/get-pro"
        }
        {
            image: "/images/_getpro_banners5.png"
            link: "#/get-pro"
        }
        {
            image: "/images/_getpro_banners6.png"
            link: "#/get-pro"
        }
        {
            image: "/images/_getpro_banners7.png"
            link: "#/get-pro"
        }
    ]
    console.log "Cloned dom element: " + $scope.slides[1].content[0].html()

Beim ausführen dieser webapp (im Grunde erfrischend Webseite), bekomme ich folgenden error in der Entwickler-Konsole: TypeError: Cannot read property 'html' at new <anonymous> (http://127.0.0.1:9000/scripts/controllers/sidebar.js:39:69) of undefined entspricht diese Linie console.log("Cloned dom element: " + $scope.slides[1].content[0].html()); im kompiliert js sidebar.js Datei.

Also dieser im Grunde bedeutet, dass diese Zeile content: $("#profile-skills-sidebar").clone() funktioniert nicht wie gedacht - es sieht aus wie das DOM-element selbst ist nicht geklont.

So, die zweite Rutsche ist [object Object] statt kopiert Fähigkeiten bar.

Bekam ich jQuery geladen (mithilfe von bower und grunt für den frontend-Entwicklung), die ich verwenden können, während Sie in der browser-devtools:

> var skills = $("#profile-skills-sidebar");
< undefined
> skills
< [<div id="profile-skills-sidebar">…</div>]
> skills[0]
< <div id="profile-skills-sidebar">…</div>

Habe ich versucht die Schaffung Richtlinie .Kaffee-Skript:

.directive "skillsBarSlide", ['$compile', ($scope, $compile, $timeout) ->
    restrict: 'A'
    #template: '<a href="{{slide.link}}"></a>'
    link: (scope, elem, attrs) ->
        $timeout( -> 
            scope.slides[1].content = angular.element($("#profile-skills-sidebar")).copy()
            element.append($compile(scope.slides[1].content)(scope))
        )
  ]

aber es hat nicht geklappt.

Also welche Schritte genau muss ich machen, um:

1. Klonen benötigt-DOM-element

2. Wahrscheinlich konvertieren zu einem string der HTML-Elemente (weil geklonte DOM wird ein Objekt)

3. Legen Sie in den gewünschten div-container

Ich weiß, dass ich brauche hier wohl $sce $kompilieren, vielleicht $desinfizieren (ich habe gelesen, die Winkel-docs ein bisschen), aber ich bin frisch zu eckig, hat nicht verstanden, es noch gut.

Dank für eventuelle Hilfe.