AngularJS $ sce只信任某些元素

时间:2016-10-12 12:12:17

标签: javascript angularjs ngsanitize

假设以下字符串:

<b><i><anotherelement>Hello World</anotherelement></i></b>

我只想允许粗体元素工作,而斜体元素(和任何其他元素!)保持不变,因此输出为: 的 <i><anotherelement>Hello World</anotherelement></i>

目前我使用:

function outputHtml($element, value){
  $element.html($sanitize(value));
}

该解决方案信任$ sce软件包附带的所有元素,因此对我没用:(

任何帮助将不胜感激, 谢谢!

1 个答案:

答案 0 :(得分:1)

检查这个小提琴 - http://jsfiddle.net/3J25M/764/

控制器 -

angular.module('ngBindHtmlExample', ['ngSanitize'])
.controller('ngBindHtmlCtrl', ['$scope','$sce', function($scope, $sce) {
    $scope.value = '<i><anotherelement>Hello World</anotherelement></i>';
    $scope.myHTML = $sce.trustAsHtml('<b ng-bind="value"></b>');
}])
.directive('compileTemplate', function($compile, $parse){
    return {
        link: function(scope, element, attr){
            var parsed = $parse(attr.ngBindHtml);
            function getStringValue() {
                return (parsed(scope) || '').toString();
            }

            // Recompile if the template changes
            scope.$watch(getStringValue, function() {
                $compile(element, null, -9999)(scope);  // The -9999 makes it skip directives so that we do not recompile ourselves
            });
        }
    }
});

HTML -

<div ng-app="ngBindHtmlExample">
    <div ng-controller="ngBindHtmlCtrl">
        <p ng-bind-html="myHTML" compile-template></p>
    </div>
</div>

希望这会有所帮助!!