Question

我正在开发一个项目，其中许多UI元素是可以在页面上多次使用的单独小部件。其中一个小部件是购物车，我有一个大视图（仅存在于一个页面上）和一个小视图（每个页面上都有）。

购物车的大视图和小视图都可见的页面中断。我已经在Angular中将它缩小到两个应用程序都被引导（使用angular.bootstrap()）这一事实，但是创建了两个不同的范围。这会导致加载错误。

我已经复制了这种情况here。即使应用程序是自举的，一个应用程序的$scope也不等于另一个应用程序。这很好，但是我可以在angular.bootstrap中引用模块，以便两个ngApp将共享相同的$scope吗？

测试HTML

<div data-app="multipleApps">
  <div ng-controller="testCtrl">
    <p ng-bind="testVar">a</p>
    <input type="text" size="25" ng-model="testVar" />
  </div>
</div>

<div data-app="multipleApps">
  <div ng-controller="testCtrl">
    <p ng-bind="testVar">a</p>
    <input type="text" size="25" ng-model="testVar" />
  </div>
</div>

Javascript

angular.module("testApp", []).controller("testCtrl", function ($scope) {
  $scope.testVar = "Ready...";
});

angular.bootstrap(document.querySelectorAll("[data-app='multipleApps']")[0], ["testApp"]);

我已经使用从angular.bootstrap()返回的注入器进行了测试，但是这引起了AngularJS的a.unshift is not a function错误。

var els = document.querySelectorAll("[data-app='multipleApps']");

if (els.length > 1) {
  var injector = angular.bootstrap(els[0], ["testApp"]);

  for (var i = 1; i < els.length; i++) {
    angular.bootstrap(els[i], injector);
  }
}

在Angular

0 个答案: