R闪亮的AngularJS工作 [英] R shiny AngularJS working

问题描述

这是一个非常好的工作，现在我想把D3代码转换为模块化的对象这将节省我很多编码，并使其可供其他人使用。我的想法是得到这个：

 < r-d3-gauge id =G1data =[ 2,3]>< / r-d3-gauge> 
< r-d3-gauge id =G2data =[4,5,6]>< / r-d3-gauge> 
  

我有两个仪表，我可以使用CSS定位或者使用HTML ....）。好的，这应该是简单的使用AngularJS。

但我不能得到AngularJS工作在R闪亮。
我做了这个测试代码：
（一个www文件夹与d3.js和angular.min.1.4.3.js旁边server.r / ui.r）

ui.r

 库（闪亮）
 
 shinyUI（fluidPage 
 tags $ head（tags $ script（src =d3.js））
，tags $ head（tags $ script（src =angular.min.1.4.3.js））
，htmlOutput（JS）
，htmlOutput（HTML）
））
  

b $ b

server.r

 库（闪亮）
 
 shinyServer ，output）{
＃HTML 
输出$ HTML<  -  renderUI（{
 html<  - ''
 html<  -  paste0（html，'
 < p>在输入框中输入内容：< / p> 
< h4>名称：< input type =textng-model =name>< / h4& $ b< h4 ng-bind =name>< / h4> 
< h4>名称：< input type =textng-model =name2>< / h4> ; 
< h4>您写道：{{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 $ b $（p）。click（function（）{
 $（this）.hide（）; 
}）; 
}）; 
< / script>'）
 HTML（html）
}）
}）
  

这会创建一个闪亮的html代码的应用程序，测试显示

  angular == defined 
 1.4.3 
 jQuery == defined 
 2.1.4 
  

所以没有问题。 jQuery工作正常（你可以单击在输入框中输入一些东西：，它是隐藏的），但如果我输入文本，它不会显示。如果我尝试类似：

 < p>名称：< input type =textng-model =name2 >< / p> 
< p>您写道：{{name2}}< / p> 
 

it wil show你写道：{{name2}}没有子集化{{name2}}部分。

解决方案

确定这样做：

ui.r

  library（shiny）
 shinyUI（bootstrapPage（includeHTML（static.html）））
  

server.r

  （shiny）
 shinyServer（function（input，output）{}）
  

static

 < script src =d3.js>< / script& 
< script src =angular.min.1.4.3.js>< / script> 
< 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>在输入框中输入内容：< / p> 
< p>名称：< input type =textng-model =name>< / p& 
< p ng-bind =name>< / p> 
< h4>名称：< input type =textng-model =name2>< / h4& 
< h4>您写道：{{name2}}< / h4> 
  

Et voila，Up and Running！ ：^）

I'm creating a dashboard with R and D3 running with library(shiny).

This works wonderfully well and now i want turn the D3 code into modular objects which will save me a lot of coding and makes it usable by others. My idea is to get to this:

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

And i have the two gauges that i can position with CSS or just inject them into shiny with HTML(....). Ok this should be simple using AngularJS.

But i can not get AngularJS to work in R shiny. I made this test code: (a www folder with d3.js and angular.min.1.4.3.js next to server.r/ui.r)

ui.r

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

server.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)
})
})

This creates a shiny app with html code that is fine, the test shows that

angular == defined
1.4.3
jQuery == defined
2.1.4

So no problem there. jQuery works fine (you can click on "Input something in the input box:" and it is hidden) but if i enter text it does not show up. If i try something like:

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

it wil show You wrote: {{ name2 }} without subsetting the {{name2}} part.

解决方案

OK this works:

ui.r

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

server.r

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

static.html

<script src="d3.js"></script>
<script src="angular.min.1.4.3.js"></script>
<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>

Et voila, Up and Running ! :^)

这篇关于R闪亮的AngularJS工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！