Question

我有这段代码

var app = angular.module('myApp', ["ngSanitize"]);

app.controller('myController', function($scope) {
    $scope.html = ['<div class="text-color">Your html code</div>',
                  '<div class="text-color">2nd div</div>',
                   '<div class="text-color">3rd div </div>',
                   '<svg width="100" height="100"><rect width="50px" height="50px" x="30" y="30"/></svg>'
                  ];
});

<div ng-app="myApp">
    <div ng-controller="myController">
        <span ng-repeat="div in html">
         <p ng-bind-html="div"></p>
        </span>
    </div>
</div>

问题是它没有显示我的控制器中保存的svg标记

Answer 1

使用$sce.trustAsHtml

＆＃13;

var app = angular.module('myApp', ["ngSanitize"]);

app.controller('myController', function($scope, $sce) {
    $scope.html = ['<div class="text-color">Your html code</div>',
                  '<div class="text-color">2nd div</div>',
                   '<div class="text-color">3rd div </div>',
                   $sce.trustAsHtml('<svg width="100" height="100"><rect width="50px" height="50px" x="30" y="30"/></svg>')
                  ];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>


<div ng-app="myApp">
    <div ng-controller="myController">
        <span ng-repeat="div in html">
         <p ng-bind-html="div"></p>
        </span>
    </div>
</div>

＆＃13;

<强> $sce Docs

ng sanitize不显示svg tag angularjs

1 个答案: