Question

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

我用Yeoman + Bower引导了这个项目。 Denver-area drop-in的控制器如下所示：

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

  });

我已经尝试了几种不同的方式将其注入我的丹佛部分。这是最新的：

<!-- 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 = $sanitize(duHtmlData)生成大致相同的错误。 HTML文件只是来自DU网站的卷曲转储。

除了语法问题，这种方法是否正确？是否有更惯用的方法来刮取/解析Angular中的第三方HTML？

Answer 1

您可以使用$ sce服务。请参阅this fiddle。

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

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

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

使用AngularJS解析HTML文档

1 个答案: