我不想转义HTML标记，并在角应用程序中使用对象文字。

Question

我是AngularJS的新手。我不想转义HTML标记，并编写了下面的代码。

首先，定义deliberatelyTrustDangerousSnipet()我成功地转义了标记(在这个站点中有了很好的顾问)。

第二，我想使用<div ng-bind-html="phone.snippet"></div>。

<script>
  angular.module('plunker', ['ngSanitize'])
  .controller('MainCtrl', ['$scope', '$sce', function($scope, $sce) { 
    $scope.phone = 
      {'name': 'Nexus S',
       'snippet': '<iframe width="560" height="315" src="//www.youtube.com/embed/-RRqZ7FAlG0?rel=0" frameborder="0" allowfullscreen></iframe>'};
    // This works well
    $scope.deliberatelyTrustDangerousSnippet = function() {
      return $sce.trustAsHtml('<iframe width="560" height="315" src="//www.youtube.com/embed/-RRqZ7FAlG0?rel=0" frameborder="0" allowfullscreen></iframe>');
    };
    // This doesn't work
    //$sce.trustAsHtml($scope.article.content);
  }])
</script>

<div ng-controller="MainCtrl">
  <div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>

  <!-- ### Can we write like below? ### -->
  <div ng-bind-html="phone.snippet"></div>

</div>    

代码也在柱塞上。

Answer 1

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular-sanitize.js"></script>
  </head>

  <body>
    <script>
      angular.module('plunker', ['ngSanitize'])
      .controller('MainCtrl', ['$scope', '$sce', function($scope, $sce) { 
        $scope.phone = 
          {'name': 'Nexus S',
           'snippet': '<iframe width="560" height="315" src="//www.youtube.com/embed/-RRqZ7FAlG0?rel=0" frameborder="0" allowfullscreen></iframe>'};
        $scope.phone.snippet = $sce.trustAsHtml($scope.phone.snippet);

      }])
    </script>

    <div ng-controller="MainCtrl">
      <div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>

      <!-- ### Can we write like below? ### -->
      <div ng-bind-html="phone.snippet"></div>

    </div>    
  </body>

</html>

另一个选项是添加ngSanitize.js，这样您就不需要执行$sce.trustAsHtml了

Answer 2

您可以定义一个secureHtml过滤器。该过滤器将您的表达式信任为HTML，如下所示

youApp.filter('secureHtml', function ($sce) {
    return function (input) {
      return $sce.trustAsHtml(input);
    }
  })

然后，您可以使用模板中的过滤器，如下所示：

<div ng-bind-html="harmlessSnippet | secureHtml"></div>

用您的示例处理柱塞：http://plnkr.co/edit/IsW7Q6s4bySp8Eim40kf?p=preview