2

我是 Angular.JS 的新手，目前正在做我的第一个项目。我有一页完整的条目

<h1>Title</h1>
<p>Teaser</p>
<p>(a link)</p>
预告片可能包含 HTML 格式或类似&amp;. 我想要做的是“解析”这个 Teaser，以便浏览器（目前是谷歌浏览器）正确地“理解”格式。

对于详情页，向 shownews 传递了一个 id，但第一次调用没有 id 来读取所有新闻，用户可以通过每个新闻链接到达详情页。在这里，我已经遇到了同样的问题。下面，您可以看到主新闻页面和详细信息页面的 Angular.JS 代码，我可以使用以下ng-bind-html指令解决详细信息页面的问题：

	$scope.shownews = function(id) {

	  if (typeof id === 'undefined') {
	    $http({
	      method: 'GET',
	      url: 'http://dev.ivm.at/getallnews.php'
	    }).
	      success(function(data, status, headers, config) {
	        $scope.allnews = data;
	        $scope.myHTML = [];

	        for (var i = 0; i < $scope.allnews.length; i++) {
	          $scope.myHTML[i] = $scope.allnews[i].Teaser;
	        }
	      });
	  } else {
	    $http({
	      method: 'GET',
	      url: 'http://dev.ivm.at/getnews.php?ID=' + id
	    }).
	      success(function(data, status, headers, config) {
	        $scope.singlenews = data;
	        $scope.Newstitel = $scope.singlenews[0].Title
            //[...]
	        $scope.Inhalt = $scope.singlenews[0].Inhalt;
	        //[...]
	        $scope.myHTML = "<h1>" + $scope.Newstitel + "</h1><br>" + $scope.Inhalt;
	      });
	  }
	}
<div data-role="page" id="allnews">
  <div id="sub">
    <section class="blog">
      <article ng-bind-html="myHTML" ng-repeat="news in allnews">
        <h1>{{news.Title}}</h1>
        <p>{{myHTML[$index]}}</p>
        <p class="readmore">
          <a href="onenews" ng-click="shownews(news.ID)">
                  Weiterlesen: {{news.Title}}
          </a>
          <span class="readmore_icon"></span>
        </p>
      </article>
    </section>
  </div>
</div>

我的问题是如何ng-bind-html正确使用该命令，以便$scope.myHTML在它是文本数组的情况下解析它。

谢谢您的回答！

4

1 回答 1

4

为此，您需要$sce在解析之前使用 angularjs 内置服务来保护 HTML 内容。

例子

HTML 视图：

<span ng-bind-html="toTrustedHTML(html)">

控制器：

angular.module('myModule').controller('myController', function($scope, $sce){
  $scope.toTrustedHTML = function (html) {
    return $sce.trustAsHtml(html);
  };
});

更新：

您可能需要使用 ngSantize 并检查以下URL，其中包含一个 plunker 说明您需要$sce.trustAsHtml()方法。

于 2015-05-27T12:48:52.963 回答