R 闪亮的 AngularJS 工作

2024-03-09

我正在创建一个仪表板,其中 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 将它们注入闪亮的(....)。好吧,使用 AngularJS 应该很简单。

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

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

这创建了一个闪亮的应用程序,其 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> 

它将显示 You write: {{ name2 }} 而不对 {{name 2}} 部分进行子集化。


好的,这有效:

ui.r

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

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

瞧,启动并运行! :^)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

R 闪亮的 AngularJS 工作 的相关文章