각상화의 목적은 무엇입니까?
여기서 angular and openlayers 디렉티브의 예를 살펴보던 중 다음 예를 발견했습니다.
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<script src="../bower_components/openlayers3/build/ol.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../dist/angular-openlayers-directive.js"></script>
<link rel="stylesheet" href="../bower_components/openlayers3/build/ol.css" />
<script>
var app = angular.module('demoapp', ['openlayers-directive']);
app.controller('DemoController', [ '$scope', function($scope) {
angular.extend($scope, {
center: {
lat: 0,
lon: 0,
autodiscover: true
}
});
}]);
</script>
</head>
<body ng-controller="DemoController">
<openlayers ol-center="center" height="400px"></openlayers>
<h1>Center autodiscover example</h1>
<form>
Latitude : <input type="number" step="any" ng-model="center.lat" />
Longitude : <input type="number" step="any" ng-model="center.lon" />
Zoom : <input type="number" step="any" ng-model="center.zoom" />
<button ng-click="center.autodiscover=true">Discover position</button>
</form>
</body>
</html>
이 예는, 여기에서는 실제의 예로서 볼 수 있습니다.
로딩되는 파일에 대한 질문입니다.왜 다음 스크립트가 로딩되는지 잘 모르겠습니다.
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
위의 스크립트의 목적은 무엇입니까?
편집: : :여기서 이 모듈의 git repo와 docs를 angular HERE에서 찾았습니다만, 이 스크립트의 목적은 아직 모릅니다.이 문서에는 예도 포함되어 있지 않습니다.
저는 jQuery로 꽤 코드를 작성했습니다만, 이것을 jQuery로 설명할 수 있는 사람이 있습니까?
를 포함할 경우angular-sanitize스크립트는 HTML을 토큰으로 해석하여 입력을 삭제합니다.그런 다음 (화이트리스트에서) 모든 안전한 토큰이 올바르게 이스케이프된html 문자열로 다시 시리얼화됩니다.즉, 안전하지 않은 입력은 반환된 문자열로 만들 수 없습니다.
이 블로그 투고에서 영감을 얻은 작은 예를 아래에 포함시켰습니다.이 스크립트를 실행하는 경우var app = angular.module("app", ["ngSanitize"]);html 링크가 올바르게 렌더링됩니다.단, 이 스테이트먼트에 코멘트를 붙이고 코멘트를 붙이면var app = angular.module("app", []);다음 오류 메시지가 나타납니다.Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script>
<!-- BEGIN disable refresh -->
<script type="text/javascript">
//Including ngSanitize ensures html links get properly sanitized
var app = angular.module("app", ["ngSanitize"]);
//If you use this code instead no html links get displayed
//var app = angular.module("app", []);
app.controller("mainController", function($scope) {
var main = this;
main.links = [
"<a href='http://google.com'>Google</a>",
"<a href='http://odetocode.com'>OdeToCode</a>",
"<a href='http://twitter.com'>Twitter</a>"
];
});
</script>
</head>
<body ng-app="app">
<section ng-controller="mainController as main">
<nav>
<ul>
<li ng-repeat="link in main.links" ng-bind-html="link">
</li>
</ul>
</nav>
</section>
</body>
</html>언급URL : https://stackoverflow.com/questions/33209938/what-is-the-purpose-of-angular-sanitize
'bestsource' 카테고리의 다른 글
| CSS의 선택 입력 필드에 위/아래 화살표를 모두 만드는 방법은 무엇입니까? (0) | 2023.02.09 |
|---|---|
| 값/참조 토큰을 위한 스프링 클라우드 + Zuul + JWT (0) | 2023.02.09 |
| angular.js에서 우클릭 이벤트를 처리하려면 어떻게 해야 합니까? (0) | 2023.02.09 |
| TypeScript에서 강력한 유형의 어레이를 만듭니다. (0) | 2023.02.09 |
| React 프로덕션 빌드가 브라우저에서 실행되지 않는 이유는 무엇입니까? (0) | 2023.02.09 |