Как правильно скопировать/клонировать элемент DOM, а затем вставить/вставить его как элемент HTML в Angular.js?

Question

Итак, у меня такой большой webapp, который использует Angular.js.
Небольшая часть этого webapp имеет боковую панель, которая в настоящее время отображает два контейнера div: один, который показывает статистику профиля пользователя (эскиз, репутация, сообщения, некоторые навыки .etc), а во-вторых - карусель слайдера (угловой-ui), показывающий некоторые изображения.

Что я хочу сделать, это клонировать всю эту боковую панель навыков и вставлять этот клонированный объект DOM в слайдер в качестве другого слайда, но преобразуется в элемент HTML.

Вот код этого слайдера:

<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> 

Вот часть этого целого контроллера боковой панели .coffee сценария:

'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() 

При выполнении этого веб-приложение (в основном освежающий веб-страницы), я получаю следующее сообщение об ошибке в консоль разработчика: TypeError: Cannot read property 'html' at new <anonymous> (http://127.0.0.1:9000/scripts/controllers/sidebar.js:39:69) of undefined, которая соответствует этой строке console.log("Cloned dom element: " + $scope.slides[1].content[0].html()); в файле js sidebar.js.

Так что это в основном означает, что эта строка content: $("#profile-skills-sidebar").clone() не работает, как предполагалось - похоже, что элемент DOM даже не клонирован.

Таким образом, второй слайд [object Object] вместо этого скопировал мастер-бар.

я JQuery загружен в систему (с помощью беседку и хрюкать для разработки внешнего интерфейса), можно использовать в то время как в браузере Devtools:

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

Я попытался создать директиву .coffee сценария:

.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)) 
     ) 
    ] 

но это не сработало.

Итак, какие шаги именно я должен сделать, чтобы:
1. клон нужен DOM элемент
2. Возможно, преобразовать его в строку HTML-элементов (потому что клонируют DOM будет объектом)
3. Вставьте в нужный div container

Я знаю, что мне нужно здесь, вероятно, $ sce, $ compile, может быть, $ sanitize (я немного читал угловые документы), но я свел к угловому, еще не понял это хорошо.

Благодарим за возможную помощь.

Answer 1

Хорошо, так наконец, это сделано, мой путь.

sidebar.coffee:

'use strict' 

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


    $scope.myInterval = 5000 
    $scope.slides = [ 
     { 
      image: "/images/_getpro_banners1.png" 
      link: "#/get-pro" 
     } 
     { 
      content: '' 
      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" 
     } 
    ] 

    [...]some_code[...] 

    $scope.renderHTML = -> 
     $scope.slides[1].content = "<div id='profile-skills-sidebar'>" + $("#profile-skills-sidebar").clone().html() + "</div>" 
     #console.log "Cloned dom element: " + $scope.slides[1].content 
     $sce.trustAsHtml($scope.slides[1].content) 

sidebar.html:

<div id="scrolling-sidebar" ng-hide="{{hasPro}}"> 
    <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}}" class="skills-bar-slide" ng-if="$index == 1" ng-bind-html="renderHTML()"></a> 
    </slide> 
    </carousel> 
</div> 

Так, HTML элемент должен быть вытащил из DOM элемента клонированных как объект JS, с помощью JQuery .html()/Функция jqLite.
Затем используя Strict Contextual Escaping, trustAsHtml() метод, подтвердите этот код HTML для ng-bind-html директива.
И в принципе, это все.