Fatal编程技术网
  • angularjs/
  • Angularjs 如何使用$sce.trustAsHtml（字符串）在Angular 1.2+；

Angularjs 如何使用$sce.trustAsHtml（字符串）在Angular 1.2+；

angularjs

Angularjs 如何使用$sce.trustAsHtml（字符串）在Angular 1.2+；,angularjs,Angularjs,ng bind html unsafe已在Angular 1.2中删除 我正在尝试实现一些需要使用ng bind html unsafe的东西。在文档和github提交中，他们说： ng bind html提供了ng html绑定不安全的行为（innerHTML的结果没有 当绑定到$sce.trustAsHtml（字符串）的结果时 您是如何做到这一点的？应该是： <div ng-bind-html="trustedHtml"></div> 正如一些评论者指出的那样，$s

ng bind html unsafe
已在Angular 1.2中删除

我正在尝试实现一些需要使用
ng bind html unsafe
的东西。在文档和github提交中，他们说：

ng bind html提供了ng html绑定不安全的行为（innerHTML的结果没有 当绑定到$sce.trustAsHtml（字符串）的结果时

您是如何做到这一点的？

应该是：

<div ng-bind-html="trustedHtml"></div>
正如一些评论者指出的那样，
$sce
必须注入控制器，否则您将得到
$sce undefined
错误

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

 myApp.controller('MyController', ['$sce', function($sce) {
    // ... [your code]
 }]);
这应该是：

<div ng-bind-html="trustedHtml"></div>
正如一些评论者指出的那样，
$sce
必须注入控制器，否则您将得到
$sce undefined
错误

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

 myApp.controller('MyController', ['$sce', function($sce) {
    // ... [your code]
 }]);
就我个人而言，在进入数据库之前，我用一些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>
就我个人而言，在进入数据库之前，我用一些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>
过滤器

app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
用法

<ANY ng-bind-html="value | unsafe"></ANY>

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

app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
用法

<ANY ng-bind-html="value | unsafe"></ANY>

<div ng-bind-html-unsafe="group.description"></div>
如果您想恢复旧指令，可以将其添加到应用程序中：

指令：

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);
            });
        }
    };
}]);

directives.directive（'ngBindHtmlUnsafe'，['$sce'，函数（$sce）{
返回{
范围：{
ngBindHtmlUnsafe:“=”，
},
模板：“”，
链接：功能（$scope、iElm、iAttrs、controller）{
$scope.updateView=函数（）{
$scope.trustedHtml=$sce.trustAsHtml（$scope.ngBindHtmlUnsafe）；
}
$scope.$watch（'ngbindthlunsafe'，函数（newVal，oldVal）{
$scope.updateView（newVal）；
});
}
};
}]);
用法

<ANY ng-bind-html="value | unsafe"></ANY>

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

如果要恢复旧指令，可以将其添加到应用程序中：

指令：

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);
            });
        }
    };
}]);

directives.directive（'ngBindHtmlUnsafe'，['$sce'，函数（$sce）{
返回{
范围：{
ngBindHtmlUnsafe:“=”，
},
模板：“”，
链接：功能（$scope、iElm、iAttrs、controller）{
$scope.updateView=函数（）{
$scope.trustedHtml=$sce.trustAsHtml（$scope.ngBindHtmlUnsafe）；
}
$scope.$watch（'ngbindthlunsafe'，函数（newVal，oldVal）{
$scope.updateView（newVal）；
});
}
};
}]);
用法

<ANY ng-bind-html="value | unsafe"></ANY>

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

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

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

对于Rails（至少在我的情况下），如果您使用的是angularjs Rails gem，请记住添加清理模块

//= require angular
//= require angular-sanitize
然后将其加载到你的应用程序中

var myDummyApp = angular.module('myDummyApp', ['ngSanitize']);
然后您可以执行以下操作：

在模板上：

%span{"ng-bind-html"=>"phone_with_break(x)"}
最终：

$scope.phone_with_break = function (x) {
  if (x.phone != "") {
   return x.phone + "<br>";
  }
  return '';
}

$scope.phone\u带中断=函数（x）{
如果（x.phone！=“”）{
返回x.phone+“
”；
}
返回“”；
}
对于Rails（至少在我的情况下），如果您使用的是angularjs Rails gem，请记住添加清理模块

//= require angular
//= require angular-sanitize
然后将其加载到你的应用程序中

var myDummyApp = angular.module('myDummyApp', ['ngSanitize']);
然后您可以执行以下操作：

在模板上：

%span{"ng-bind-html"=>"phone_with_break(x)"}
最终：

$scope.phone_with_break = function (x) {
  if (x.phone != "") {
   return x.phone + "<br>";
  }
  return '';
}

$scope.phone\u带中断=函数（x）{
如果（x.phone！=“”）{
返回x.phone+“
”；
}
返回“”；
}

var line=“aaa”

1.使用过滤器
使用（html）：

在根角应用程序中添加
ngSanitize


var app = angular.module("app", ["ngSanitize"]);


使用（html）：



==>单击“aaa”不会发生任何事情

var line=“aaa”

1.使用过滤器
使用（html）：

在根角应用程序中添加
ngSanitize


var app = angular.module("app", ["ngSanitize"]);


使用（html）：



==>单击“aaa”不会发生任何事情

只要创建一个过滤器就可以了。（回答角度1.6）

并在html中使用如下内容


<h2 ng-bind-html="someScopeValue | trustHtml"></h2>



只要创建一个过滤器就可以了。（回答角度1.6）

并在html中使用如下内容


<h2 ng-bind-html="someScopeValue | trustHtml"></h2>





我对其他人有用的代码（只需一个aspx来做文本区帖子）：：
在这里输入代码
角度.module（'htmldoc'，['ngSanitize']）.controller（'x'，function（$scope，$sce）{
//$scope.htmlContent='（函数（）{location=\”http://moneycontrol.com\“；}（）在最后一个有效内容中”；
$scope.htmlContent=''；
$scope.withoutanize=函数（）{
返回$sce.getTrustedHtml（$scope.htmlContent）；
};
$scope.postMessage=函数（）{
var ValidContent=$sce.trustAsHtml（$scope.htmlContent）；
//你的ajax呼叫在这里
};
});
示例显示使用双向绑定将有效内容发布到服务器


发送

我对其他人有用的代码（只需一个aspx来做文本区帖子）：：
在这里输入代码
角度.module（'htmldoc'，['ngSanitize']）.controller（'x'，function（$scope，$sce）{
//$scope.htmlContent='（函数（）{location=\”http://moneycontrol.com\“；}（）在最后一个有效内容中”；
$scope.htmlContent=''；
$scope.withoutanize=函数（）{
返回$sce.getTrustedHtml（$scope.htmlContent）；
};
$scope.postMessage=函数（）{
var ValidContent=$sce.trustAsHtml（$scope.htmlContent）；
//你的ajax呼叫在这里
};
});
示例显示使用双向绑定将有效内容发布到服务器