如何使用两个同名的应用

Question

我需要在我的页面上使用具有相同名称的AngularJS应用程序创建两个范围。原因是我使用的是不允许添加到正文标签的 Wordpress 主题。 而且我无法创建具有角度属性的高级div，因为主题会自动添加结束div。

两个角度示波器都在做完全相同的事情。

这是我想要的：

<!-- lots of theme code here -->
 <div ng-app="app" ng-controller="ctrl">some angular variables and HTML</div>
<!-- lots of theme code here -->
 <div ng-app="app" ng-controller="ctrl">some angular variables and HTML</div>

当我执行上述操作时，第一个角度范围执行良好，但第二个角度范围似乎被忽略了。 我想是因为不允许在同一页面上使用两个同名的ng应用程序。

在我的JS文件中，我只有"应用程序"和"ctrl"。 还有其他方法可以做到这一点吗？

我可以在 js 文件中创建两个角度应用程序，但随后我必须复制我的所有代码......右？

使用 javascript 将上述两个指令添加到 body 标签中不是最简单/最简单的吗？

Answer 1

您应该使用angular.bootsrap在您的页面上初始化您的应用程序，请将您的代码添加到 ready 事件angular.element该事件将在 DOM 准备就绪时初始化您的角度应用程序。

angular.element(document).ready(function() {
  //document inside angular.bootstrap could be replaced by any element selector,
  //wherever you want to inject your angular app
  angular.bootstrap(document, ['myApp']);
});

我相信使用上述方法会更好，谢谢。

Answer 2

简单的解决方案：只需使用 JavaScript 将 ng-app 和 ng-controller 动态添加到 body 标签中。 脚本必须位于页面底部，以便 DOM 可以首先完全加载。