vaadin:使用自定义布局集成angular js

vaadin: integrate angular js using custom layout

本文关键字：集成 angular js 布局 自定义 vaadin      更新时间：2023-09-26

我试图通过使用如下自定义布局在vaadin中集成angular js应用程序：

VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setMargin(true);
    mainLayout.setWidth("1380px");
    setCompositionRoot(mainLayout);
    Panel panel = new Panel();
    CustomLayout layout = null;
    try {
         String dynamicHtml = "<div ng-app='"app'">..........</div>";
         layout = 
      new CustomLayout(new   ByteArrayInputStream(dynamicHtml.getBytes()));
    } catch (IOException e) {
        logger.error("could not create custom layaout", e);
    }
 panel.setContent(layout);
 mainLayout.addComponent(panel);
importJs();
public void importJs() {
String PATH_TO_JS_SCRIPT = jsURL+"?tata=" + new Date();
String script = "try{var fileref=document.createElement('script');";
script += "fileref.setAttribute('"type'",'"text/javascript'");";
script += "fileref.setAttribute('"src'", '"" + PATH_TO_JS_SCRIPT + 
    "'");";
script += "document.getElementsByTagName('"head 
'")[0].appendChild(fileref);}catch(e){alert(e);}";
Page.getCurrent().getJavaScript().execute(script);
}

我使用importJs方法导入脚本js。我第一次访问页面时，js文件被加载，它就工作了。第二次，它不起作用。就好像没有导入脚本一样。我看不出我的代码出了什么问题？使用Javascript注释，我也有同样的问题。我使用vaadin 7.6.5java 7

在CustomLayout中插入角度代码是个坏主意。

我建议你读一下文字：Vaadin和AngularJS——一起快乐。

有一个附加组件可以让您结合Vaadin和AngularJS的最佳功能：Vaangular

Js文件只包含了一次，而且在页面的生命周期中只包含过一次。为了在每次我们显示页面时完善这个脚本，我使用： 
  if(typeof angular != 'undefined'){
       angular.bootstrap(document.getElementById('swdId'), ['app']);"
   }

问题已修复

相关文章：