ng-bind-html-unsafe在Angular 1.2中被移除

我试图实现的东西,我需要使用ng-bind-html-不安全。在文档和github提交中,他们说:

ng-bind-html提供了ng-html-bind-不安全的行为(innerHTML的结果没有 当绑定到$sce.trustAsHtml(string)的结果时,sanitization)。

怎么做呢?


当前回答

这应该是:

<div ng-bind-html="trustedHtml"></div>

在你的控制器中:

$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

而不是旧的语法,你可以直接引用$scope.html变量:

<div ng-bind-html-unsafe="html"></div>

正如一些评论者指出的那样,$sce必须注入到控制器中,否则将得到$sce undefined错误。

 var myApp = angular.module('myApp',[]);

 myApp.controller('MyController', ['$sce', function($sce) {
    // ... [your code]
 }]);

其他回答

如果你想要回到旧的指令,你可以添加这个到你的应用程序:

指令:

directives.directive('ngBindHtmlUnsafe', ['$sce', function($sce){
    return {
        scope: {
            ngBindHtmlUnsafe: '=',
        },
        template: "<div ng-bind-html='trustedHtml'></div>",
        link: function($scope, iElm, iAttrs, controller) {
            $scope.updateView = function() {
                $scope.trustedHtml = $sce.trustAsHtml($scope.ngBindHtmlUnsafe);
            }

            $scope.$watch('ngBindHtmlUnsafe', function(newVal, oldVal) {
                $scope.updateView(newVal);
            });
        }
    };
}]);

使用

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

来源:https://github.com/angular-ui/bootstrap/issues/813

这应该是:

<div ng-bind-html="trustedHtml"></div>

在你的控制器中:

$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

而不是旧的语法,你可以直接引用$scope.html变量:

<div ng-bind-html-unsafe="html"></div>

正如一些评论者指出的那样,$sce必须注入到控制器中,否则将得到$sce undefined错误。

 var myApp = angular.module('myApp',[]);

 myApp.controller('MyController', ['$sce', function($sce) {
    // ... [your code]
 }]);

JavaScript

$scope.get_pre = function(x) {
    return $sce.trustAsHtml(x);
};

HTML

<pre ng-bind-html="get_pre(html)"></pre>
$scope.trustAsHtml=function(scope)
{
    return $sce.trustAsHtml(scope);
}
<p class="card-text w-100" ng-bind-html="trustAsHtml(note.redoq_csd_product_lead_note)"></p>

就我个人而言,在进入数据库之前,我会用一些PHP库对我的所有数据进行消毒,这样我就不需要另一个XSS过滤器了。

来自AngularJS 1.0.8

directives.directive('ngBindHtmlUnsafe', [function() {
    return function(scope, element, attr) {
        element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe);
        scope.$watch(attr.ngBindHtmlUnsafe, function ngBindHtmlUnsafeWatchAction(value) {
            element.html(value || '');
        });
    }
}]);

使用方法:

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

禁用$sce:

app.config(['$sceProvider', function($sceProvider) {
    $sceProvider.enabled(false);
}]);