Tom*_*mas 19 javascript angularjs
是否可以完全禁用HTML的清理?
我想要实现的是在我的控制器中:
$scope.greeting = '<h2>Hello World</h2>'
Run Code Online (Sandbox Code Playgroud)
在我看来
{{greeting}}
Run Code Online (Sandbox Code Playgroud)
我不能(也不想)使用ng-bind-html等,我想一起禁用消毒.
只是为了给出一些更多的上下文 - 我正在准备简单的"框架环绕"来开发特定系统的模板.
当您为此系统开发模板时,他们有预先定义的片段,您可以通过编写"{{something}}"来放置在页面上,但它不是在角度上运行(可能是小胡子或其他东西).
现在模板只能在线开发,这是非常用户不友好的过程.因此,我设置了角度与相应路线等的简单项目,因此每个人都可以在他们的机器上开发模板,然后只需将其复制到系统.
这就是为什么在模板文件中它不应该以角度完成它,它只是尽可能接近它们的系统.
最后一点 - 我尝试过:
myApp.config(['$sceProvider',function($sceProvider){
$sceProvider.enabled(false);
}]);
Run Code Online (Sandbox Code Playgroud)
没有为我做任何事
使用您的场景:
$scope.movie = {title:"<h1>Egghead.io AngularJS, Binding</h1>",
src:"http://www.youtube.com/embed/Lx7ycjC8qjE"};
Run Code Online (Sandbox Code Playgroud)
并直接插入标题而不使用 ng-bind-html="movie.title"
<p>{{movie.title}}</p>
Run Code Online (Sandbox Code Playgroud)
会产生这个
<h1>Egghead.io AngularJS Binding</h1>
Run Code Online (Sandbox Code Playgroud)
直插值似乎已经消毒,但实际上并没有编译.
除非在指令中编译,否则带有HTML的插值字符串将被视为字符串.
其他框架倾向于"基于字符串"(它们直接提供浏览器),而AngularJS是"基于DOM的",它编译HTML并使用范围和观察事件积极地管理它.Martin Fowler将此称为模板视图与转换视图.
HTML可以在Directives中编译,但只能在标记和控制器中进行插值
我创建了2个试图访问"不安全网址"的掠夺者,这意味着我插入了一个网址ng-src而不使用$sce.trustAs
图表1: 配置期间禁用了Plunker 1 SCE
标记插入"不安全的网址":
<p>{{movie.title}}</p>
<iframe class="youtube-player" type="text/html" width="640" height="385" ng-src="{{movie.src}}" allowfullscreen frameborder="0">
</iframe>
Run Code Online (Sandbox Code Playgroud)
应用程序禁用 $sceProvider
var app = angular.module('plunker', ['ngSanitize']);
app.config(['$sceProvider',function($sceProvider){
$sceProvider.enabled(false);
}]);
app.controller('MainCtrl', function($scope, $sce) {
$scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});
Run Code Online (Sandbox Code Playgroud)
插入"不安全"URL时没有错误.显示视频.
图表2:Plunker 2 app.config使用默认SCE设置注释掉了
var app = angular.module('plunker', ['ngSanitize']);
//app.config(['$sceProvider',function($sceProvider){
// $sceProvider.enabled(false);
//}]);
app.controller('MainCtrl', function($scope, $sce) {
$scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});
Run Code Online (Sandbox Code Playgroud)
错误:
错误:[$ interpolate:interr]无法插值:{{movie.src}}错误:[$ sce:insecurl]阻止从$ sceDelegate策略允许的url加载资源.网址:http://www.youtube.com/embed/Lx7ycjC8qjE