我试图写一个简单的插入式曲棍球应用在AngularJS。它会聚集来自当地溜冰场的时间表数据，并显示每个地铁区域在一个页面上。然而，一些我从聚集的站点似乎不支持JSON，所以我用刮的HTML，然后解析它的时间/日期信息的任务。我的问题是：是否有解析和显示角刮HTML数据的惯用方法是什么？

I'm attempting to write a simple drop-in hockey application in AngularJS. It will aggregate schedule data from local rinks and show it on a single page per metro area. However, some of the sites I'm aggregating from don't appear to support JSON, so I'm tasked with scraping HTML and then parsing it for time/date info. My question is: is there an idiomatic way to parse and display scraped HTML data in Angular?

我自举与约曼+鲍尔项目。丹佛地区投递控制器看起来是这样的：

I bootstrapped the project with Yeoman + Bower. The controller for Denver-area drop-in looks like this:

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'
    ];

  });

我试过几种不同的方式注入到我的丹佛部分这一点。这是最新的：

I've tried several different ways to inject this into my Denver partial. This is the most recent:

<!-- 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 ---------------->...

我也试着做分析我控制器内部： $ scope.duParsedData = $消毒（duHtmlData）这大致会产生同样的错误。 HTML文件是简单地从杜的网站上卷曲转储。

I've also tried doing the parsing inside my controller: $scope.duParsedData = $sanitize(duHtmlData) which generates roughly the same error. The HTML file is simply a curl dump from DU's website.

语法问题不谈，就是这种做法正确吗？是否有刮/解析第三方HTML的角度更地道的方式？

Syntax issues aside, is this approach correct? Is there a more idiomatic way to scrape/parse third-party HTML in Angular?

推荐答案

您可以用$ SCE服务。请参见这个小提琴。

You can use $sce service. See this fiddle.

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

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

I added some of the page's Html. Comment did not raise an issue.

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