angularjs - 一页中包含多个 AngularJS 版本

标签 angularjs

使用 的两个不同版本可能会遇到什么问题AngularJS 加载到一页?

显然,这似乎是一件愚蠢的事情,但我的用例是一个使用 的页面。 AngularJS 合并一个第三方组件,该组件拖入其首选版本 AngularJS .

更新:

找到了一些信息:

https://groups.google.com/forum/#!msg/angular/G8xPyD1F8d0/u1QNDNvcwW4J
https://github.com/angular/angular.js/pull/1535

最佳答案

Angular 真的不准备与其他版本共存。但这是可行的。

首先加载 Angular 库并确保在加载之前window.angular是空的:

  <script src="vendor/angular/1.2.0/angular.min.js"></script>
  <script src="app/app2.js"></script>
  <script>
    var angular2 = angular;
    window.angular = null; // here we're cleaning angular reference
  </script>

  <script src="vendor/angular/1.0.5/angular.js"></script>
  <script src="app/app1.js"></script>
  <script>
    var angular1 = angular;
  </script>

请注意,每个 angular 版本的每个应用程序( app1.jsapp2.js )应该在加载 angular 库后立即加载。

应用程序的每个 JavaScript 文件都应该包含在自执行函数中 (function(angular) { ... })(angular) .看app2.js的例子:
(function(angular) {

angular.module('myApp2', []).

controller('App2Ctrl', function($scope) {
    $scope.$watchCollection('[a, b, c]', function() {
        console.log(angular.version.full);
    });
});

})(angular);

请注意,这里我使用的是 $watchCollection仅适用于 angular 1.2.x。通过为每个文件提供匿名函数的范围,您迫使应用程序到达 angular属性而不是 window.angular属性(property)。

最后,您必须使用手动方法引导应用程序:
<body>

  <div id="myApp1" ng-controller="App1Ctrl">
  </div>

  <div id="myApp2" ng-controller="App2Ctrl">
  </div>

  <script>
    angular1.bootstrap(document.getElementById('myApp1'), ['myApp1']);
    angular2.bootstrap(document.getElementById('myApp2'), ['myApp2']);
  </script>
</body>

工作plunker here .运行后,请检查控制台窗口以查看使用的 angular 的记录版本。

关于angularjs - 一页中包含多个 AngularJS 版本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19537960/

相关文章:

javascript - AngularJs 在验证后将用户数据保存到 session 中

javascript - 在 ng-repeat 中使用变量

javascript - 如何以 Angular 创建自定义指令

angularjs - Angular - polymer 相互作用

php - 更新数据库时我不想更新所有列

javascript - 使用 Controller 方法选择 Angular 选项卡

javascript - 如何定位div的子元素?

angularjs - Angular Dart中的路由和构造函数

angularjs - Angular Material mdTabs : is it possible to have vertical tabs?

javascript - 如果模型计算结果为 true,则检查 angularjs 复选框