gpt4 book ai didi

javascript - R Shiny 的AngularJS工作

转载 作者:搜寻专家 更新时间:2023-11-01 05:04:32 24 4
gpt4 key购买 nike

我正在使用运行库( Shiny )的 R 和 D3 创建一个仪表板。

这非常有效,现在我想将 D3 代码转换为模块化对象,这将为我节省大量编码并使其可供其他人使用。我的想法是做到这一点:

<r-d3-gauge id="G1" data="[1,2,3]"></r-d3-gauge>
<r-d3-gauge id="G2" data="[4,5,6]"></r-d3-gauge>

我有两个仪表,可以用 CSS 定位,也可以用 HTML(....) 将它们注入(inject) shiny。好的,使用 AngularJS 应该很简单。

但我无法让 AngularJS 在 R shiny 中工作。我做了这个测试代码:(在 server.r/ui.r 旁边有一个带有 d3.js 和 angular.min.1.4.3.js 的 www 文件夹)

用户界面

library(shiny)

shinyUI(fluidPage(
tags$head(tags$script(src = "d3.js"))
,tags$head(tags$script(src = "angular.min.1.4.3.js"))
,htmlOutput("JS")
,htmlOutput("HTML")
))

服务器.r

library(shiny)

shinyServer(function(input, output) {
# HTML
output$HTML <- renderUI({
html <- ''
html <- paste0(html,'
<p>Input something in the input box:</p>
<h4>Name: <input type="text" ng-model="name"></h4>
<h4 ng-bind="name"></h4>
<h4>Name: <input type="text" ng-model="name2"></h4>
<h4>You wrote: {{name2}}</h4>
')
HTML(html)
})

# JS
output$JS <- renderUI({
html <- "<script language='JavaScript'>"
html <- paste0(html,'
if(typeof angular == "undefined") {
console.log("angular == undefined");
} else {
console.log("angular == defined");
console.log(angular.version.full)
}
if (window.jQuery) {
console.log("jQuery == defined");
console.log(jQuery.fn.jquery);
} else {
console.log("jQuery == undefined");
}
d3.select("body")
.attr("ng-app","")
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>')
HTML(html)
})
})

这会创建一个 Shiny 的应用程序,其中包含很好的 html 代码,测试表明

angular == defined
1.4.3
jQuery == defined
2.1.4

所以没问题。 jQuery 工作正常(您可以单击“在输入框中输入内容:”并且它是隐藏的)但是如果我输入文本它不会显示。如果我尝试类似的东西:

<p>Name: <input type="text" ng-model="name2"></p>
<p>You wrote: {{ name2 }}</p>

它将显示您写了:{{ name2 }} 而没有子集 {{name2}} 部分。

最佳答案

好的,这有效:

用户界面

library(shiny)
shinyUI(bootstrapPage(includeHTML("static.html")))

服务器.r

library(shiny)
shinyServer(function(input, output) {})

静态.html

<!DOCTYPE HTML>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
</head>
<body>
<script language='JavaScript'>

if(typeof angular == "undefined") {
console.log("angular == undefined");
} else {
console.log("angular == defined");
console.log(angular.version.full)
}

if (window.jQuery) {
console.log("jQuery == defined");
console.log(jQuery.fn.jquery);
} else {
console.log("jQuery == undefined");
}

d3.select("body").attr("ng-app","")
</script>

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
<h4>Name: <input type="text" ng-model="name2"></h4>
<h4>You wrote: {{name2}}</h4>

</body>
</html>

Et voila,启动并运行! :^)

关于javascript - R Shiny 的AngularJS工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31962802/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com