所以我有这么大的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'
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