Question

我在解析$http.get()的HTML响应时遇到问题。

我可以获取原始HTML响应并将其作为字符串输出到控制台：

'<html><head><title>portal</title></head><body><H1>portal</H1><hr><pre><A HREF="/WebPortal/">To Parent Directory</A><br><br><A HREF="/WebPortalPI/Brochures/White/">White stuff</A><br><A HREF="/WebPortalPI/Brochures/Green/">Green things</A><br><A HREF="/WebPortalPI/Brochures/Yellow/">Yellow wigits</A><br><A HREF="/WebPortalPI/Brochures/Blue/">Blue Misc</A><br></pre><hr></body></html>'

当我使用DOMParser()解析HTML然后查询pre标记中的所有锚标记时，它似乎丢失了href属性。这是我在console.log($scope.data)末尾的$http.get().success()中看到的简化版本。

[a，a，a，a，a，item：function]
  0：a
  ...
  href：“”   ...

正如你在小提琴中看到的那样，text数据正在通过angular / javascript从响应HTML传递到主页HTML。有谁知道为什么我无法解析这些href属性以便在我的主页面中使用？

DEMO： JSFIDDLE

HTML：

<div ng-controller="MyCtrl">
  <div ng-repeat="link in data">
    <a href="{{link.href}}">{{link.text}}</a>
</div>

使用Javascript：

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.data = [];

    $http.get('/my-api-call').success(function (data, status, headers, config) {

      //rather than posting my actual api link (not public yet) this is the data that is returned in the response
      var str = '<html><head><title>portal</title></head><body><H1>portal</H1><hr><pre><A HREF="/WebPortal/">To Parent Directory</A><br><br><A HREF="/WebPortalPI/Brochures/White/">White stuff</A><br><A HREF="/WebPortalPI/Brochures/Green/">Green things</A><br><A HREF="/WebPortalPI/Brochures/Yellow/">Yellow wigits</A><br><A HREF="/WebPortalPI/Brochures/Blue/">Blue Misc</A><br></pre><hr></body></html>';

      var parser = new DOMParser();

      var doc = parser.parseFromString(str, 'text/html');

      $scope.data = doc.firstChild.querySelectorAll('pre a');

    }).error(function (data, status, headers, config) {
      //handle $http error
    });

}]);

从$ http响应中解析HTML丢失href属性

0 个答案: