javascript - 使用 AngularJS 解析 HTML 文档

Question

我正在尝试使用 AngularJS 编写一个简单的嵌入式曲棍球应用程序。它将汇总来自本地溜冰场的时间表数据，并在每个都市区的单个页面上显示。但是，我从中聚合的一些网站似乎不支持 JSON，因此我的任务是抓取 HTML，然后解析它以获取时间/日期信息。我的问题是:在 Angular 中是否有一种惯用的方法来解析和显示抓取的 HTML 数据？

我使用 Yeoman + Bower 启动了这个项目。丹佛地区 drop-in 的 Controller 如下所示:

angular.module('dropinApp')
  .controller('DenverCtrl', function ($scope, $http, $sanitize) {

   // Pull data from a pre-scraped html frame to get around CORS issues.
   /* http://denveruniv-web.ungerboeck.com/coe/coe_p1_all.aspx?oc=01&cc=ICEDI30#mainContent */
   $http.get('/dropin_data/du-schedule.html').
      success(function(data, status, headers, config) {
        $scope.duHtmlData = data;
        $scope.duStatus = status;
      }).
      error(function(data, status, headers, config) {
        $scope.duData = data;
        $scope.duStatus = status;
      });

    // Yeoman/Bower stuff
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

  });

我尝试了几种不同的方法将其注入(inject)我的 Denver partial。这是最新的:

<!-- denver.html -->
<p>Denver Drop-In.</p>

<p ng-bind-html="duHtmlData">{{ duHtmlData }}</p>
<p>status is {{ duStatus }}</p>

这失败了:

Error: [$sanitize:badparse] The sanitizer was unable to parse the following block of html: <!-- Body Listing ---------------->...

我也尝试在我的 Controller 内进行解析:$scope.duParsedData = $sanitize(duHtmlData) 生成大致相同的错误。 HTML 文件只是来自 DU 网站的 curl 转储。

撇开语法问题不谈，这种方法是否正确？在 Angular 中是否有更惯用的方式来抓取/解析第三方 HTML？

Answer 1

您可以使用 $sce 服务。参见 this fiddle .

$scope.t = $sce.trustAsHtml(html);

我添加了一些页面的 Html。评论没有提出问题。

<!-- Body Listing ---------------->