AEM中重复拖拽组件ng-app失效，能否在ng-app中用三元运算符？

这个问题我之前在类似的AEM+Angular项目里遇到过，你的推测完全正确——同一页面多个同名ng-app会导致Angular只初始化第一个匹配的实例，后续组件都会被忽略。而且你设想的三元运算符写法确实行不通：Angular启动时会立刻扫描ng-app属性，此时{{}}插值还未被解析，它会把整个表达式字符串当成app名称，根本起不到动态切换的作用。

下面给你几个实用的解决方案，按推荐度排序：

方案一：封装为Angular指令（最推荐的长期方案） #

如果组件是为了复用，最符合Angular设计理念的方式是把它做成可复用指令，整个页面只保留一个主ng-app，指令可以多次实例化，每个实例拥有独立作用域和配置。

示例代码： #

页面主模板（AEM页面级模板）

<body ng-app="mainAemApp">
  <!-- 可多次插入组件，通过属性传递apiType -->
  <my-reusable-component api-type="type1"></my-reusable-component>
  <my-reusable-component api-type="type2"></my-reusable-component>
</body>

指令实现JS

// 定义主应用模块
angular.module('mainAemApp', [])
// 封装可复用组件指令
.directive('myReusableComponent', function() {
  return {
    restrict: 'E', // 作为标签使用
    scope: {
      apiType: '@' // 从标签属性接收api类型，实现不同实例的差异化配置
    },
    // 组件模板（也可以通过templateUrl引用外部模板）
    template: `
      <div class="aem-component-container">
        <h3>{{componentTitle}}</h3>
        <ul>
          <li ng-repeat="item in dataList">{{item.label}}</li>
        </ul>
      </div>
    `,
    controller: ['$scope', '$http', function($scope, $http) {
      // 根据apiType发起对应请求
      const apiEndpoint = $scope.apiType === 'type1' 
        ? '/api/site1/data' 
        : '/api/site2/data';

      $http.get(apiEndpoint)
        .then(res => {
          $scope.dataList = res.data;
          $scope.componentTitle = $scope.apiType === 'type1' 
            ? "站点1专属数据" 
            : "站点2专属数据";
        })
        .catch(err => console.error('数据请求失败:', err));
    }]
  };
});

这种方式彻底避免了多ng-app的冲突，组件复用性更强，维护成本也更低，是Angular官方推荐的组件化实践。

方案二：手动启动Angular应用（兼容现有架构的过渡方案） #

如果因为现有代码架构限制，暂时无法改成指令模式，可以用angular.bootstrap()手动启动每个组件的Angular实例，完全绕过自动扫描ng-app的机制，实现每个组件独立初始化。

示例代码： #

AEM组件HTML模板

<!-- 去掉ng-app，用自定义属性存储配置和唯一标识 -->
<div class="aem-angular-component" 
     data-api-type="${apiType}" 
     data-component-id="${component.id}">
  <div ng-controller="ComponentCtrl">
    <h3>{{title}}</h3>
    <p ng-repeat="content in apiData">{{content}}</p>
  </div>
</div>

组件初始化JS

// 先定义通用的基础模块，包含组件共用的控制器
angular.module('baseComponentModule', [])
.controller('ComponentCtrl', ['$scope', '$http', function($scope, $http) {
  // 根据传入的apiType发起请求
  const requestUrl = $scope.apiType === 'type1' 
    ? '/api/type1/endpoint' 
    : '/api/type2/endpoint';

  $http.get(requestUrl)
    .then(res => {
      $scope.apiData = res.data;
      $scope.title = $scope.apiType === 'type1' ? "类型1数据" : "类型2数据";
    });
}]);

// 页面加载完成后，遍历所有组件手动启动Angular
document.addEventListener('DOMContentLoaded', function() {
  const components = document.querySelectorAll('.aem-angular-component');
  
  components.forEach(component => {
    const apiType = component.getAttribute('data-api-type');
    const uniqueId = component.getAttribute('data-component-id');
    // 生成唯一的模块名，避免冲突
    const uniqueModuleName = `componentApp_${uniqueId}`;

    // 基于基础模块创建独立模块，传递apiType配置
    angular.module(uniqueModuleName, ['baseComponentModule'])
    .run(['$rootScope', function($rootScope) {
      $rootScope.apiType = apiType;
    }]);

    // 手动启动当前组件的Angular应用
    angular.bootstrap(component, [uniqueModuleName]);
  });
});

这个方案利用AEM组件自带的唯一ID（${component.id}）生成不重复的模块名，确保每个组件的Angular实例完全独立，同时能根据apiType发起不同的API请求。

方案三：动态生成唯一ng-app名称（备选方案） #

如果一定要保留ng-app属性，就必须确保每个组件的ng-app名称绝对唯一，同样可以利用AEM组件的唯一ID来动态生成。

示例代码： #

AEM组件HTML模板

<!-- 用组件唯一ID生成唯一的ng-app名称 -->
<div ng-app="componentApp_${component.id}" 
     class="aem-component"
     data-api-type="${apiType}">
  <div ng-controller="UniqueComponentCtrl">
    <!-- 组件内容 -->
    <p>{{apiResponse}}</p>
  </div>
</div>

组件JS

document.addEventListener('DOMContentLoaded', function() {
  const components = document.querySelectorAll('.aem-component');
  
  components.forEach(component => {
    const appName = component.getAttribute('ng-app');
    const apiType = component.getAttribute('data-api-type');

    // 为每个唯一的ng-app名称创建对应模块
    angular.module(appName, [])
    .controller('UniqueComponentCtrl', ['$scope', '$http', function($scope, $http) {
      const apiUrl = apiType === 'type1' ? '/api/type1' : '/api/type2';
      
      $http.get(apiUrl)
        .then(res => $scope.apiResponse = res.data.message);
    }]);
  });
});

注意：这种方式需要确保JS代码在组件HTML之后加载，或者在DOMContentLoaded事件中执行，避免Angular扫描ng-app时模块还未定义。

内容的提问来源于stack exchange，提问作者shabarinath