Question

我的main.controller.js里面有一个简单的json对象。

$scope.sections = [
    {
        id: "landing",
        description: "<div><img pinch-zoom src='public/img/model.png'></div>"
    }
];

在我看来，我有ng-repeat循环浏览$scope.sections。

<md-content>
    <div ng-repeat="section in sections">
        {{ section.description }}
    </div>
</md-content>

但是当我输出{{ section.description }}时，附加到img的指令没有被触发。这几乎就像是被忽略了。这是输出 - 我的捏缩放完全删除：

<img src='public/img/model.png'>

如果我将指令应用于不在ng-repeat内的图像，则该指令触发就好了。

我在ng-repeat中尝试了以下内容，但无济于事。

<div ng-bind-html="section.description"></div>

Answer 1

使用$ sanitize和$ sce来清理html

 <script>
     angular.module('sanitizeExample', ['ngSanitize'])
       .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
         $scope.snippet =
           '<p style="color:blue">an html\n' +
           '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
           'snippet</p>';
         $scope.deliberatelyTrustDangerousSnippet = function() {
           return $sce.trustAsHtml($scope.snippet);
         };
       }]);
 </script>

指令未被触发

1 个答案: