基于$http调用返回值渲染HTML：Angular 1.5.5最佳实现方案咨询

嘿，针对你在Angular 1.5.5里遇到的这个用$http返回数据生成嵌入HTML的问题，我给你整理了一套实用的实现方案，咱们一步步来搞定：

第一步：封装工厂的$http请求 #

首先咱们得把两次$http请求用工厂封装好，用$q.all()来并行处理这两个请求，这样能保证两组数据都拿到后再去生成HTML，避免异步请求带来的数据不完整问题：

angular.module('yourAppName')
.factory('dataFactory', ['$http', '$q', function($http, $q) {
  return {
    getPanelData: function() {
      // 第一个请求：获取面板名称数组
      const panelNamesReq = $http.get('/api/panel-names');
      // 第二个请求：获取面板对应的内容数组
      const panelContentReq = $http.get('/api/panel-contents');
      
      // 并行发起两个请求，全部完成后返回整合的数据
      return $q.all([panelNamesReq, panelContentReq])
        .then(responses => {
          return {
            panelNames: responses[0].data,
            panelContents: responses[1].data
          };
        })
        .catch(error => {
          console.error('数据请求失败:', error);
          throw error; // 把错误抛给控制器处理
        });
    }
  };
}]);

第二步：控制器里生成HTML内容 #

接下来在控制器里调用工厂方法，拿到两组数据后循环拼接成你需要的HTML结构。这里要注意：Angular会默认过滤非信任的HTML，所以得注入$sce服务来标记咱们生成的HTML是安全的，才能正常渲染：

angular.module('yourAppName')
.controller('yourController', ['$scope', 'dataFactory', '$sce', function($scope, dataFactory, $sce) {
  // 初始化HTML变量为空
  $scope.sectionHTML = '';

  // 调用工厂获取数据并生成HTML
  dataFactory.getPanelData()
    .then(data => {
      const { panelNames, panelContents } = data;
      let htmlStr = '';

      // 假设两个数组长度匹配，循环生成面板HTML
      for(let i = 0; i < panelNames.length; i++) {
        htmlStr += `
          <div class="panel panel-default">
            <div class="panel-heading">${panelNames[i]}</div>
            <div class="panel-body">${panelContents[i]}</div>
          </div>
        `;
      }

      // 标记HTML为安全内容，让Angular允许渲染
      $scope.sectionHTML = $sce.trustAsHtml(htmlStr);
    })
    .catch(() => {
      // 请求失败时显示提示内容
      $scope.sectionHTML = $sce.trustAsHtml('<p class="text-danger">数据加载失败，请稍后重试</p>');
    });
}]);

第三步：模板中嵌入生成的HTML #

现在你的模板是空白框架，只需要用ng-bind-html指令把生成的HTML渲染进去就行：

<div ng-controller="yourController">
  <!-- 空白框架中嵌入动态生成的HTML -->
  <div ng-bind-html="sectionHTML"></div>
</div>

一些额外提醒 #

• 如果两组数组长度不一致，记得加判断逻辑（比如取较短数组的长度循环），避免出现数组越界的错误；
• 如果面板名称或内容里包含特殊字符（比如<、>），$sce.trustAsHtml会帮你处理大部分转义问题，要是有特殊场景可以手动转义后再拼接；
• Angular 1.5.x里尽量遵循数据流规范，用ng-bind-html而不是直接操作DOM插入内容，这样更符合Angular的设计思想。

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