js ios复制粘贴一个html元素,如何正确地复制/克隆DOM元素，然后将其作为HTML元素粘贴/插入到Angular.js中？...

所以我有这么大的webapp使用Angular.js。

这个webapp的一小部分有sidebar，它目前显示两个div容器：一个显示用户配置文件统计信息(缩略图，声誉，消息，一些技能等)，第二个是显示一些图像的滑块(angular-ui)旋转木马。如何正确地复制/克隆DOM元素，然后将其作为HTML元素粘贴/插入到Angular.js中？

我想要做的是克隆整个技能边栏并将此克隆的DOM对象作为另一张幻灯片粘贴到滑块中，但转换为HTML元素。

下面是该滑块的代码：

下面是这整个侧边栏控制器.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()

当运行这个web应用(基本上刷新网页)，我获得以下错误开发者控制台：TypeError: Cannot read property 'html' at new (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

< [

…

]

> skills[0]

<

…

我试着在.coffee脚本创建指令：

.directive "skillsBarSlide", ['$compile', ($scope, $compile, $timeout) ->

restrict: 'A'

#template: ''

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

我知道我在这里可能需要$ sce，$ compile也许$ sanitize(我已经阅读了角度文档)，但是我对角度很陌生，还没有很好地理解它。

感谢您的帮助。

2015-02-06

spaffy

+0

没有人知道吗？ 我会用'$(“＃profile-skills-sidebar”).html()'或'angular.copy($(“＃profile-skills-sidebar”))''来尝试，也许这会有所帮助。 或者，尝试将这个技能栏的html作为'content：'的值手动粘贴，然后使用'$ sce.trustAsHtml(copiedHtml)'，这可能会有所帮助。 我会让你知道的。 –

2015-02-09 09:36:54