AngularJS 与 Vaadin 的集成答案

【问题标题】：AngularJS integration with VaadinAngularJS 与 Vaadin 的集成
【发布时间】：2015-07-30 06:32:14
【问题描述】：

我在自定义组件中多次使用 jquery 与 vaadin 的集成。我想看看 angularjs 与 vaadin 集成的示例。

另外需要知道 AngularJS 正在使用 IE9。

【问题讨论】：

标签： javascript java angularjs vaadin vaadin7

【解决方案1】：

您可以查看https://github.com/akquinet/vaangular/tree/master/vaangular-demo 以了解 2 如何集成 Vaadin 和 AngularJS...

发生的主要事情是为与 vaadin 连接的 AngularJS 创建一个 $scope。有一个基本挑战：vaadin 调用的 JavaScript 超出了任何 AngularJS 依赖注入或范围管理。同时，您为 AngularJS 编写的所有代码显然都在依赖注入和范围管理内部。

此外，AngularJS 假设（至少本身）页面的 HTML 被解析一次并连接到 AngularJS。然而，对于 vaadin，页面的 HTML 只是启动 vaadin 的一些代理，没有什么可以连接的。更重要的是，其中包含 AngularJS 的部分可能会在应用程序启动后的相当长的一段时间内添加到 vaadin UI。

因此，需要一种方法来根据需要从外部 AngularJS 依赖管理/范围魔法创建一些新的 AngularJS 连接的 DOM 和控制器。

给定一个使用 angular.module 定义的模块“innerModuleName”，vaangular 分两步实现（在定制的 NgTemplate.js 中）：

首先，AngularJS 中的作用域是通过

创建的

angular.injector([ 'ng', innerModuleName ]).invoke(function($compile, $rootScope) {

其次，作用域（称为scpe）和DOM是通过

var connectorElement = angular.element(connector.getElement());
var cmp = $compile(templateElement);
scpe = $rootScope.$new(false);
cmp(scpe);
scpe.$digest();
connectorElement.append(templateElement);

在这个过程的最后，我们有一个新的 DOM 部分连接到一个新的控制器。

关键是现在，您可以在 angularJS 中使用 Vaadin 连接器

【讨论】：

请不要只发布链接。将重要内容添加到您的答案中。
对于后代，您能否在您的答案中包含您认为有用的链接的相关部分？这样，如果链接断开、更改等，您的答案不会变得无用。非常感谢。
非常感谢您回答这个问题。
如果这个答案是你想要的，请将其作为答案。