Question

我是Angular.JS＆amp;的新手。目前正在开展我的第一个项目。我有一个页面，里面装满了那种

＆＃13;

<h1>Title</h1>
<p>Teaser</p>
<p>(a link)</p>

＆＃13;

＆＃13; 预告片可能包含HTML格式或&等元素。我想要做的是＆＃34;解析＆＃34;这个预告片使得格式化得到了解，并且＃34;通过浏览器（目前是谷歌浏览器）正确使用。

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

＆＃13;

	$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;
	      });
	  }
	}

＆＃13;

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

＆＃13;

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

感谢您的回答！

Answer 1

为此，您需要使用$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，并检查包含plunker的以下URL，说明您需要$sce.trustAsHtml()方法。

如何在Angular.JS中解析变量的HTML内容？

1 个答案: